تبدیل سند HTML به PDF

رندر HTML درون سندباکس مرورگر بدون فرایندهای سرور بک‌اند، شامل تکنیک‌های پیچیده ثبت DOM در سمت کاربر است. اپلیکیشن ما یک معماری خط لوله دوگانه متناسب با وفاداری و امنیت ارائه می‌دهد:

۱. رستری‌سازی بوم با DPI بالا: برای صفحات وب غنی با چیدمان‌های پیچیده CSS Grid و Flexbox، فونت‌های وب و نمودارهای پویا (Chart.js، ‏D3)، موتور ما درخت DOM هدف را در یک OffscreenCanvas ایزوله یا iframe در سندباکس کپی می‌کند. سبک‌های محاسبه‌شده (getComputedStyle) را برای هر گره محاسبه می‌کند، درخت بصری را با نسبت پیکسل دستگاه ۲x یا ۳x ‏(۱۴۴ تا ۲۱۶ DPI) از طریق SVG foreignObject یا رندر html2canvas رندر می‌کند و جریان بوم را به XObjectهای تصویری تیز صفحات PDF صفحه‌بندی می‌کند.

۲. چاپ CSS Paged Media: برای مستندات و گزارش‌های پرمتن، ابزار ما از موتور چاپ بومی مرورگر و ماژول CSS3 Paged Media بهره می‌برد و جریان‌های متنی وکتوری تمیزی تولید می‌کند که متن قابل انتخاب، منحنی‌های تیز تایپوگرافی و خطوط وکتوری مقیاس‌پذیر را حفظ می‌کنند.

صفحات وب ذاتاً پیوسته‌اند و بدون مرزهای طبیعی صفحه به‌صورت عمودی پیمایش می‌شوند. تبدیل HTML پیوسته به صفحات گسسته قابل چاپ نیازمند پایبندی به مشخصات W3C CSS Paged Media Module Level 3 است.

موتور ما دستورالعمل‌های حیاتی چاپ CSS را رعایت می‌کند:

۱. قاعده @page: ابعاد و حاشیه‌های صفحه را پیکربندی می‌کند (مثلاً '@page { size: A4 portrait; margin: 15mm; }').

۲. کنترل شکست صفحه: نویسندگان می‌توانند پیش از سرفصل‌های اصلی فصل‌ها 'break-before: page' یا 'page-break-before: always' را درج کنند تا بخش‌ها تمیز از بالای یک برگه جدید آغاز شوند.

۳. جلوگیری از شکسته شدن محتوا: اعمال 'break-inside: avoid' یا 'page-break-inside: avoid' بر جدول‌های داده، بخش‌های امضا و کارت‌های تصویر از شکسته شدن ناشیانه‌ای که در آن یک ردیف یا پاراگراف در مرز فیزیکی صفحه نصف می‌شود جلوگیری می‌کند.

مبدل ما با تفسیر این قواعد، به‌جای صفحات وب که بی‌نظم بریده شده‌اند، اسناد چندصفحه‌ای ساختاریافته و آماده انتشار تولید می‌کند.

یک مشکل فراگیر در رندر HTML سمت کاربر، مدیریت منابع خارجی — از جمله Google Fonts، تایپوگرافی Typekit، پیوندهای شیوه‌نامه دوردست و تصاویر با مبدأ متفاوت — است. اگر یک قطعه HTML به تصویری ارجاع دهد که روی دامنه دیگری بدون سرآیندهای مجاز Cross-Origin Resource Sharing ‏(CORS) میزبانی شده، سندباکس امنیتی مرورگر برای جلوگیری از نشت داده میان مبدأها دسترسی بوم را مسدود می‌کند (خطای امنیتی 'tainted canvas').

موتور ما ابزارهای خودکار درون‌خطی‌سازی دارایی‌ها را ارائه می‌دهد. قواعد CSS @import و اعلان‌های @font-face را تجزیه و فایل‌های دودویی فونت را به‌صورت Data URIهای base64 درون‌خطی می‌کند (مثلاً 'src: url(data:font/woff2;base64,...)'). برای تصاویر، استفاده از SVG جاسازی‌شده یا رشته‌های داده base64 را توصیه می‌کند. این تضمین می‌کند تایپوگرافی، آیکون‌های برندینگ سازمانی و گرافیک‌ها بدون وابستگی به شبکه خارجی یکسان رندر شوند.

وب‌سایت‌های مدرن از media queryهای واکنش‌گرای CSS ‏(@media screen and (max-width: 768px)) برای تنظیم چیدمان بر اساس عرض صفحه استفاده می‌کنند. اگر یک قطعه HTML درون یک ظرف دلخواه رندر شود، ممکن است به‌جای نمایش چیدمان کامل دسکتاپ به نمای منوی همبرگری موبایل فرو بریزد.

ابزار ما شبیه‌سازی پویای نما را در خود دارد. می‌توانید نمای رندر را روی عرض‌های استاندارد دسکتاپ (مثلاً ۱۰۲۴ یا ۱۲۰۰ پیکسل) یا عرض‌های استاندارد چاپ (۷۹۴ پیکسل برای A4 با ۹۶ DPI) قفل کنید. موتور نوع رسانه 'print' ‏(@media print) را شبیه‌سازی می‌کند و به توسعه‌دهندگان وب اجازه می‌دهد دقیقاً شیوه‌نامه‌های چاپی تعریف‌شده در اپلیکیشن خود را پیش‌نمایش و کامپایل کنند.

تولید صورت‌حساب‌های PDF، صورت‌های مالی، خلاصه‌های پزشکی یا داشبوردهای داخلی اختصاصی با APIهای ابری سمت سرور یک تعهد انطباقی بزرگ است. ارسال داده‌های حساس مشتریان یا URLهای داخلی شرکت به میکروسرویس‌های شخص ثالث GDPR، ‏HIPAA و سیاست‌های امنیتی سازمانی را نقض می‌کند.

2run.tools این آسیب‌پذیری‌ها را کاملاً حذف می‌کند. همه تجزیه HTML، محاسبه سبک CSS، رندر بوم و تولید بایت‌های PDF ‏۱۰۰٪ به‌صورت محلی درون سندباکس حافظه مرورگر شما اجرا می‌شوند. کد منبع HTML و داده‌های مالی شما هرگز رایانه‌تان را ترک نمی‌کنند و امنیت کاملاً ایزوله‌ای برای عملیات حساس سازمانی فراهم می‌شود.

یک تفاوت حیاتی میان رندر دیجیتال مرورگر و نشر چاپی فیزیکی در دقت تایپوگرافی است. مرورگرهای وب اغلب گلیف‌های ناموجود را با فونت‌های جایگزین سیستم عوض می‌کنند یا ضخیم‌سازی ساختگی و ایتالیک مصنوعی اعمال می‌کنند که تناسب حروف را مخدوش می‌کند. در نشر PDF حقوقی و سازمانی، چنین انحرافات تایپوگرافی آماتوری به نظر می‌رسند و حتی می‌توانند ابهام قالب‌بندی ایجاد کنند.

موتور ما شبیه‌سازی کامل موتور چیدمان OpenType را در خود دارد. وقتی فونت‌های وب سفارشی (WOFF2، ‏TTF، ‏OTF) در منبع HTML شما درون‌خطی شوند، ویژگی‌های پیشرفته OpenType — از جمله لیگاتورهای اختیاری، جفت‌های کرنینگ، حروف کوچک بزرگ‌نما و ارقام جدولی — با وفاداری تایپوگرافی زیرپیکسلی ارزیابی و رستری می‌شوند. برای گزارش‌های مالی، استفاده از 'font-variant-numeric: tabular-nums' تضمین می‌کند ارقام مالی چندستونه در همه صفحات دقیقاً روی ممیز اعشار تراز شوند.

افزون بر این، با تبدیل محلی HTML درون سندباکس اجرای مطمئن مرورگر، فونت‌های وب دارای مجوز اختصاصی به‌طور امن روی دستگاه شما ایزوله می‌مانند. هرگز در معرض خطر افشای فایل‌های فونت تجاری یا نقض قراردادهای مجوز فونت سازمانی روی سرورهای ابری خارجی قرار نمی‌گیرید.

اسناد HTML مدرن اغلب کنترل‌های تعاملی پویایی دارند، مانند نمودارهای بومی رندرشده با JavaScript ‏(Chart.js، ‏ApexCharts، ‏D3.js)، شبکه‌های داده واکنش‌گرا و ورودی‌های فرم قابل پر کردن (<input>، <textarea>، <select>). ثبت دقیق این وضعیت‌های پویا نیازمند ارزیابی وضعیت زنده DOM است نه صرفاً تجزیه رشته HTML ایستا.

ابزار ما پیش از گرفتن عکس از چیدمان منتظر می‌ماند تا اجرای JavaScript و چرخه‌های انیمیشن نمودارهای سمت کاربر کامل شوند. مقادیر فعلی همه کنترل‌های فرم را استخراج، لایه‌های بوم متحرک را به بیت‌مپ‌های ایستا منجمد و یک PDF چندصفحه‌ای تمیز و پروضوح می‌سازد که دقیقاً وضعیت بی‌درنگ داشبوردها و اپلیکیشن‌های تعاملی شما را بازتاب می‌دهد.