كيفية إنشاء ملف PDF من تطبيق الويب الخاص بك

نشرت: 2022-03-10
ملخص سريع ↬ هناك مجموعة متنوعة من الخيارات عندما يتعلق الأمر بإنشاء ملف PDF من تطبيق ويب. في هذه المقالة ، تلقي راشيل أندرو نظرة على الأدوات المتوفرة وتشارك توصياتها لمساعدتك في العثور على الأداة التي تناسبك بشكل أفضل.

تتطلب العديد من تطبيقات الويب منح المستخدم القدرة على تنزيل شيء ما بتنسيق PDF. في حالة التطبيقات (مثل متاجر التجارة الإلكترونية) ، يجب إنشاء ملفات PDF هذه باستخدام بيانات ديناميكية ، وتكون متاحة على الفور للمستخدم.

في هذه المقالة ، سأستكشف الطرق التي يمكننا من خلالها إنشاء ملف PDF مباشرة من تطبيق ويب أثناء التنقل. إنها ليست قائمة شاملة بالأدوات ، لكنني أهدف بدلاً من ذلك إلى توضيح الأساليب المختلفة. إذا كانت لديك أداة مفضلة أو أي تجارب خاصة بك لمشاركتها ، فيرجى إضافتها إلى التعليقات أدناه.

بدءا من HTML و CSS

من المحتمل أن يقوم تطبيق الويب الخاص بنا بالفعل بإنشاء مستند HTML باستخدام المعلومات التي ستتم إضافتها إلى ملف PDF الخاص بنا. في حالة وجود فاتورة ، قد يتمكن المستخدم من عرض المعلومات عبر الإنترنت ، ثم النقر لتنزيل ملف PDF لسجلاته. قد تكون بصدد إنشاء قسائم تعبئة ؛ مرة أخرى ، المعلومات محفوظة بالفعل داخل النظام. تريد تنسيق ذلك بطريقة لطيفة للتنزيل والطباعة. لذلك ، فإن أفضل مكان للبدء هو التفكير فيما إذا كان من الممكن استخدام HTML و CSS لإنشاء إصدار PDF.

لدى CSS مواصفات تتعامل مع CSS للطباعة ، وهذه هي وحدة الوسائط المُرقمّة. لدي نظرة عامة على هذه المواصفات في مقالتي "Designing For Print With CSS" ، ويستخدم العديد من ناشري الكتب CSS لجميع مخرجاتهم المطبوعة. لذلك ، بما أن CSS نفسها لها مواصفات للمواد المطبوعة ، فمن المؤكد أننا سنكون قادرين على استخدامها؟

إن أبسط طريقة يمكن للمستخدم من خلالها إنشاء ملف PDF هي عبر متصفحه. باختيار الطباعة إلى PDF بدلاً من الطابعة ، سيتم إنشاء ملف PDF. للأسف ، فإن ملف PDF هذا عادة لا يكون مرضيًا تمامًا! لتبدأ ، ستحتوي على الرؤوس والتذييلات التي تتم إضافتها تلقائيًا عند طباعة شيء ما من صفحة ويب. سيتم تنسيقها أيضًا وفقًا لورقة أنماط الطباعة الخاصة بك - على افتراض أن لديك واحدة.

المشكلة التي نواجهها هنا هي ضعف الدعم لمواصفات التجزئة في المتصفحات ؛ قد يعني هذا أن محتوى صفحاتك ينقسم بطرق غير معتادة. دعم التجزئة غير مكتمل ، كما اكتشفت عندما بحثت في مقالتي ، "Breaking Boxes With CSS Fragmentation". هذا يعني أنك قد لا تتمكن من منع تقسيم المحتوى دون المستوى الأمثل ، مع ترك الرؤوس كعنصر آخر في الصفحة ، وهكذا.

بالإضافة إلى ذلك ، ليس لدينا القدرة على التحكم في المحتوى في مربعات هوامش الصفحة ، على سبيل المثال إضافة رأس من اختيارنا لكل صفحة أو ترقيم صفحة لإظهار عدد الصفحات الموجودة في الفاتورة المعقدة. تُعد هذه الأشياء جزءًا من مواصفات الوسائط Paged ، ولكن لم يتم تنفيذها في أي متصفح.

مقالتي "دليل إلى حالة أوراق أنماط الطباعة في 2018" لا تزال دقيقة من حيث نوع الدعم الذي توفره المتصفحات للطباعة مباشرة من المتصفح ، باستخدام ورقة أنماط طباعة.

المزيد بعد القفز! أكمل القراءة أدناه ↓

الطباعة باستخدام محركات عرض المستعرض

هناك طرق للطباعة إلى PDF باستخدام محركات عرض المتصفح ، دون المرور بقائمة الطباعة في المتصفح ، وينتهي بك الأمر برؤوس وتذييلات كما لو كنت قد طبعت المستند. كانت الخيارات الأكثر شيوعًا ردًا على تغريدتي هي wkhtmltopdf والطباعة باستخدام Chrome بدون رأس و Puppeteer.

wkhtmltopdf

الحل الذي تم ذكره عدة مرات على Twitter هو أداة سطر أوامر تسمى wkhtmltopdf. تأخذ هذه الأداة ملف HTML أو ملفات متعددة ، جنبًا إلى جنب مع ورقة أنماط وتحولها إلى ملف PDF. يقوم بذلك باستخدام محرك عرض WebKit.

لذلك ، تقوم هذه الأداة بشكل أساسي بنفس الشيء مثل الطباعة من المتصفح ، ومع ذلك ، لن تحصل على الرؤوس والتذييلات المضافة تلقائيًا. على هذا الجانب الإيجابي ، إذا كان لديك ورقة أنماط طباعة صالحة للمحتوى الخاص بك ، فيجب أيضًا إخراجها بشكل جيد إلى PDF باستخدام هذه الأداة ، وبالتالي قد تتم طباعة تخطيط بسيط بشكل جيد للغاية.

ومع ذلك ، لسوء الحظ ، ستظل تواجه نفس المشكلات التي تواجهك عند الطباعة مباشرة من مستعرض الويب من حيث نقص الدعم لمواصفات الوسائط Paged وخصائص التجزئة ، حيث لا تزال تطبع باستخدام محرك عرض المستعرض. هناك بعض العلامات التي يمكنك تمريرها إلى wkhtmltopdf لإعادة إضافة بعض الميزات المفقودة التي قد تكون لديك افتراضيًا باستخدام مواصفات الوسائط المُقسمة إلى صفحات. ومع ذلك ، فإن هذا يتطلب بعض العمل الإضافي بالإضافة إلى كتابة HTML و CSS جيدة.

كروم مقطوع الرأس

هناك إمكانية أخرى مثيرة للاهتمام وهي استخدام Headless Chrome و Puppeteer للطباعة إلى PDF.

ومع ذلك ، مرة أخرى ، أنت مقيد بدعم المستعرض للوسائط المُقسمة إلى صفحات والتجزئة. هناك بعض الخيارات التي يمكن تمريرها إلى وظيفة page.pdf() . كما هو الحال مع wkhtmltopdf ، تضيف هذه بعض الوظائف التي يمكن أن تكون ممكنة من CSS إذا كان هناك دعم للمتصفح.

قد يكون أحد هذه الحلول سيفعل كل ما تحتاجه ، ومع ذلك ، إذا وجدت أنك تخوض معركة ما ، فمن المحتمل أنك تصل إلى حدود ما هو ممكن مع محركات عرض المتصفح الحالية ، و سيحتاج إلى البحث عن حل أفضل.

JavaScript Polyfills للوسائط المرقمة

توجد محاولات قليلة لإعادة إنتاج مواصفات الوسائط المُقسمة إلى صفحات في المستعرض باستخدام JavaScript - بشكل أساسي إنشاء ملف متعدد الوسائط متعدد الصفحات. قد يمنحك هذا دعم وسائط Paged عند استخدام محرك العرائس. ألق نظرة على paged.js و Vivliostyle.

استخدام وكيل مستخدم طباعة

إذا كنت ترغب في الاستمرار في استخدام حل HTML و CSS ، فأنت بحاجة إلى البحث عن وكيل مستخدم (UA) مصمم للطباعة من HTML و CSS ، والذي يحتوي على واجهة برمجة تطبيقات لإنشاء ملف PDF من ملفاتك. يقوم وكلاء المستخدم هؤلاء بتنفيذ مواصفات الوسائط المُقسمة إلى صفحات ولديهم دعم أفضل لخصائص تجزئة CSS ؛ سيعطيك هذا تحكمًا أكبر في الإخراج. تشمل الخيارات الرائدة ما يلي:

  • أمير
  • بيت الهوائي
  • PDFReactor

ستقوم UA المطبوع بتنسيق المستندات باستخدام CSS - تمامًا كما يفعل مستعرض الويب. كما هو الحال مع دعم المستعرض لـ CSS ، تحتاج إلى التحقق من وثائق UAs هذه لمعرفة ما تدعمه. على سبيل المثال ، يدعم Prince (الذي أعرفه كثيرًا) Flexbox ولكن ليس CSS Grid Layout في وقت كتابة هذا التقرير. عند إرسال صفحاتك إلى الأداة التي تستخدمها ، عادةً ما يكون هذا مع ورقة أنماط محددة للطباعة. كما هو الحال مع ورقة أنماط الطباعة العادية ، لن يكون CSS الذي تستخدمه على موقعك مناسبًا لإصدار PDF.

إن إنشاء ورقة أنماط لهذه الأدوات مشابه جدًا لإنشاء ورقة أنماط طباعة عادية ، واتخاذ نوع من القرارات من حيث ما يتم عرضه أو إخفائه ، وربما باستخدام حجم أو ألوان مختلفة للخط. ستتمكن بعد ذلك من الاستفادة من الميزات الموجودة في مواصفات الوسائط المُقسمة إلى صفحات وإضافة الحواشي السفلية وأرقام الصفحات وما إلى ذلك.

فيما يتعلق باستخدام هذه الأدوات من تطبيق الويب الخاص بك ، ستحتاج إلى تثبيتها على الخادم الخاص بك (بعد شراء ترخيص للقيام بذلك ، بالطبع). المشكلة الرئيسية في هذه الأدوات أنها باهظة الثمن. ومع ذلك ، نظرًا للسهولة التي يمكنك من خلالها إنتاج المستندات المطبوعة معهم ، فقد يدفعون لأنفسهم في الوقت الذي يوفره المطور.

من الممكن استخدام Prince عبر API ، على أساس الدفع لكل مستند ، عبر خدمة تسمى DocRaptor. سيكون هذا بالتأكيد مكانًا جيدًا لبدء العديد من التطبيقات كما لو كان يبدو أنه سيكون أكثر فعالية من حيث التكلفة لاستضافة التطبيق الخاص بك ، فإن تكلفة تطوير التبديل ستكون ضئيلة.

البديل المجاني ، الذي ليس شاملاً تمامًا مثل الأدوات المذكورة أعلاه ولكنه قد يحقق النتائج التي تحتاجها ، هو WeasyPrint. لا ينفذ بشكل كامل جميع الوسائط المصفحة ، ومع ذلك ، فإنه ينفذ أكثر من محرك المستعرض. بالتأكيد ، واحد لمحاولة!

الأدوات الأخرى التي تدعي أنها تدعم التحويل من HTML و CSS تشمل PDFCrowd ، والتي تدعي بجرأة أنها تدعم HTML5 و CSS3 و JavaScript. ومع ذلك ، لم أتمكن من العثور على أي تفاصيل حول ما تم دعمه بالضبط ، وما إذا كان أي من مواصفات الوسائط Paged. كما تلقيت إشارة في الردود على تغريدتي mPDF.

الابتعاد عن HTML و CSS

هناك عدد من الحلول الأخرى التي تبتعد عن استخدام HTML و CSS وتتطلب منك إنشاء مخرجات محددة للأداة. فيما يلي بعض المتنافسين على JavaScript:

  • jsPDF
  • pdfmake

التوصيات

بخلاف الأساليب القائمة على JavaScript ، والتي قد تتطلب منك إنشاء تمثيل مختلف تمامًا للمحتوى الخاص بك للطباعة ، فإن جمال العديد من هذه الحلول هو أنها قابلة للتبادل. إذا كان الحل الخاص بك يعتمد على استدعاء أداة سطر الأوامر ، وتمرير هذه الأداة الخاصة بك HTML و CSS وربما بعض JavaScript ، فمن السهل جدًا التبديل بين الأدوات.

أثناء كتابة هذا المقال ، اكتشفت أيضًا غلاف Python الذي يمكنه تشغيل عدد من الأدوات المختلفة. (لاحظ أنك بحاجة إلى تثبيت الأدوات نفسها بالفعل ، ومع ذلك ، قد تكون هذه طريقة جيدة لاختبار الأدوات المختلفة في نموذج مستند.)

لدعم Paged Media والتجزئة ، سيأتي Prince و Antenna House و PDFReactor في المقدمة. كمنتجات تجارية ، فإنها تأتي أيضًا مع الدعم. إذا كانت لديك ميزانية وصفحات معقدة تريد طباعتها إلى PDF ، وكان الحد الخاص بك هو وقت المطور ، فستجد على الأرجح أن هذه هي أسرع طريق لجعل إنشاء ملف PDF الخاص بك يعمل بشكل جيد.

ومع ذلك ، في كثير من الحالات ، ستعمل الأدوات المجانية بشكل جيد بالنسبة لك. إذا كانت متطلباتك واضحة جدًا ، فإن wkhtmltopdf ، أو حل Chrome و Puppeteer الأساسي قد يفي بالغرض. يبدو بالتأكيد أنه يعمل مع العديد من الأشخاص الذين ردوا على تغريدتي الأصلية.

إذا وجدت نفسك تكافح من أجل الحصول على الإخراج الذي تريده ، فاحذر من أنه قد يكون تقييدًا لطباعة المتصفح ، وليس أي شيء تقوم به بشكل خاطئ. في حالة رغبتك في المزيد من دعم Paged Media ، ولكنك لست في وضع يسمح لك بالذهاب إلى منتج تجاري ، فربما ألق نظرة على WeasyPrint.

آمل أن يكون هذا تقريرًا مفيدًا عن الأدوات المتاحة لإنشاء ملفات PDF من تطبيق الويب الخاص بك. إذا لم يكن هناك شيء آخر ، فهو يوضح أن هناك مجموعة متنوعة من الخيارات ، إذا كان خيارك الأولي لا يعمل بشكل جيد.

يرجى إضافة تجاربك واقتراحاتك الخاصة في التعليقات ، فهذه واحدة من تلك الأشياء التي ينتهي الأمر بالكثير منا للتعامل معها ، ويمكن أن تكون التجربة الشخصية المشتركة مفيدة بشكل لا يصدق.

قراءة متعمقة

نبذة عن الموارد والأدوات المختلفة المذكورة في هذه المقالة ، جنبًا إلى جنب مع بعض الموارد المفيدة الأخرى للعمل مع ملفات PDF من تطبيقات الويب.

تحديد

  • وحدة الوسائط المقسمة
  • تجزئة

المقالات والموارد

  • تصميم للطباعة باستخدام CSS
  • كسر المربعات مع تجزئة CSS
  • دليل لحالة أوراق أنماط الطباعة في عام 2018
  • الشروع في العمل مع الكروم مقطوعة الرأس ومحرك الدمى
  • طباعة css.rocks

أدوات

  • wkhtmltopdf
  • paged.js
  • فيفليوستايل
  • أمير
  • بيت الهوائي
  • PDFReactor
  • دوكرابتور
  • سهلة الطباعة
  • PDFCrowd
  • mPDF
  • jsPDF
  • pdfmake
  • إنتاج ونشر الخادم