يقوم المستخدم بملء النموذج والنقرات للحفظ ، ويمكنه تنزيل مستند PDF مباشرة.
حل توليد الخادمالأفكار
قامت Google Chrome بتطوير ميزة Chrome Headless الخاصة بها في عام 2017 وأطلقت Puppeteer في نفس الوقت. يمكن فهمه على أنه متصفح ليس له واجهة ولكن يمكنه إكمال الميزات الوظيفية للخادم.
حتى نتمكن من بدء تشغيل متصفح Puppeteer على الخادم ، وفتح عنوان URL الوجهة ، واستخدام وظيفة التحويل التي يوفرها متصفح Chrome لتحويل HTML إلى PDF.
توليد الرمز الأساسي على الخادمأولاً ، تحتاج إلى تثبيت Puppeteer. قد تكون هناك أخطاء في تثبيت NPM. من الأفضل استخدام صورة CNPM Taobao لتثبيتها.
أدخل cnpm i puppeteer -S التبعيات التثبيت.
لإنشاء ملف JS ، تحتاج فقط إلى فتح عنوان URL مع متصفح Puppeteer وحفظ PDF.
// html2pdf.jsconst puppeteer = require ('puppeteer') ؛ (async function () {// ابدأ خدمة const service = await puppeteer.launch () ؛ page.goto ('https://koa.bootcss.com/#context') ؛ ثم أدخل node html2pdf.js على وحدة التحكم لبدء الخدمة.
بالطبع ، يمكن للوحدة النمطية أيضًا تصدير طريقة الوحدة النمطية وفقًا لمنطق العمل.
عيب
غير قادر على حفظ البيانات الديناميكية على النموذج
نظرًا لأنها صفحة طلب من الخادم ، إذا لم يتم حفظ إدخال المستخدم على عنوان الطلب ، فإن PDF القطع ستكون الحالة الأولية التي لم يتم فيها ملء الصفحة.
بمعنى آخر ، يمكن أن يحول الصفحات الثابتة فقط لأن احتياجاتنا لديها الكثير من مدخلات المستخدم ، لذلك تمرير.
يولد العميل الرمز الأساسيالأفكار
عيب
تشويه.
يمكننا أن نجد بوضوح أنه نظرًا لأنه يشبه إدخال لقطة الشاشة في PDF على الصفحة ، فمن المحتمل أن تؤثر دقة وتكوين الصفحة على جودة صورة الإخراج.
في الوقت نفسه ، لأنها لقطة شاشة ، قد يتم فقدان رابط الصفحة والوظائف الأخرى.
نص قطع
عندما تكون قماش القماش أكبر من حجم صفحة واحدة من PDF ، سيكون الإخراج يخطئ. في هذا الوقت ، نحتاج إلى تحديد ما إذا كانت قماش القماش يتجاوز حجم A4. إذا تجاوزت القماش ، فقم بتقسيم القماش وإدخاله في صفحة مختلفة.
المشكلة تأتي مرة أخرى في هذا الوقت. نظرًا لأنها تقسم الصورة ، فمن المحتمل أن يتم اقتطاع الصورة أو النص من النصف ، لأننا لا نستطيع تحليل بنية العنصر الداخلي القماش.
الكود الأساسي
لا تحتوي احتياجاتنا على صور وروابط ، وبالتالي فإن مشكلة التشويه لها تأثير ضئيل علينا. في الوقت نفسه ، يتكون شكلنا من عناصر متعددة ذات طول مكرر ، وهذه العناصر قصيرة جدًا ولن تتجاوز قطعة واحدة من ورق A4 (على الرغم من أن هذا ليس صارمًا ، إذا لزم الأمر ، يمكنك الحصول على عرض وارتفاع عنصر DOM وقطعه وفقًا لارتفاع عنصر DOM).
لذلك أخطط لتقسيم القماش مباشرة وفقًا للعنصر ، وحفظ كل عنصر في صفحة من ورقة A4.
يجب فهم العديد من الأساليب الأساسية قبل أن تبدأ:
html2canvas
// DOM هي عقدة DOM التي سيتم تحويل HTML2CANVAS (DOM ، {backgroundColor: #ffffff ، العرض: العرض ، الارتفاع: الطول ، المقياس: 2 ، alledtaint: true ،}).JSPDF
// إنشاء مثيل دع pdf = new jspdf ('' ، 'pt' ، 'a4') ؛ // إضافة الصورة إلى ملف PDF // المعلمة الأولى هي تنسيق الملف (base64) الذي سيتم إدراجه ، والثاني هو تنسيق الملف // الثالث والرابع هما الإحداثيات في الزاوية اليسرى العليا من الصورة ، والآخران هما عرض وارتفاع الصورة بعد إدراج الصورة pdf.addimage (صورة ، 'JPEG ، 10،10 ، وضعها ، // إضافة صفحة جديدة pdf.addpage () // حفظ ملف pdf pdf.save ()قماش
// canvas هي الصورة التي سيتم قطعها // sx ، sy هي الإحداثيات لبدء اقتصاص // swidth و swidth هي عرض وارتفاع زراعة // dx و dy هي الإحداثيات التي تم إدراجها في الصورة بعد زراعة // swidth ، shight ، shight ، shight ، dy ، diDth ، dy ، diDth ، diDth ، dy ، diDth ، dy. هرم) ؛
/*** description: نموذج إلى ملف pdf* regurn: pdf*/onsubmit () {// هذا هو النموذج الذي أريد تحويله ، هناك العديد من الجداول المماثلة فيه ، Let form = this. $ refs.form ؛ // الحصول على عرض وارتفاع العنصر دع العرض = form.getBoundingClientRect (). العرض ؛ دع الارتفاع = form.getBoundingClientRect (). الارتفاع ؛ html2canvas (form ، {backgroundColor: #ffffff ، العرض: العرض ، الارتفاع: المقياس ، المقياس: 2 ، allowtaint: true ،}). . pdf.addimage (itemImage ، 'JPeg' ، 10،10،575.28،575.28/item.width. pdf.save ('test.pdf') ؛ دع chunkheight = الارتفاع/num ؛ // ارتفاع كل شريحة دع chunklist = [] ؛ // تخزين قماشية النتيجة (دع i = 0 ؛ i <quight ؛ i+= chunkheight) {// تهيئة موضع مربع المحاصيل المليئة بالسماح sx = 0 ، sy = i ، swidth = width ، setthight = chunkheight ، dx = 0 ، dy = 0 ؛ // إنشاء عقدة قماش Let CanvasItem = document.createElement (قماش) ؛ // تهيئة حجم قماش canvasitem.height = chunkheight ؛ canvasitem.width = العرض ؛ دع cxt = canvasitem.getContext (2d) ؛ // ضع الصورة المزروعة على Node Canvas Node CXT.DrawImage (Canvas ، SX ، SY ، Swidth ، Sneight ، DX ، DY ، Swidth ، snight) ؛ chunklist.push (canvasitem) ؛ } إرجاع chunklist ؛} ، التأثير النهائيالصفحة بعد حفظ النموذج
تأثير التحويل إلى PDF
هذه هي المقالة حول حل تنفيذ العميل الخالص والخادم الخالص لـ HTML إلى PDF. لمزيد من HTML إلى محتوى PDF ، يرجى البحث عن المقالات السابقة من Wulin.com أو متابعة تصفح المقالات ذات الصلة أدناه. آمل أن يدعم الجميع wulin.com في المستقبل!