شرح تفصيلي لاستخدام قماش لحفظ صفحات الويب كملفات PDF ودعم عبر المجال

في المقالة السابقة، ذكرت أن Canvas يقوم بتصوير صفحات الويب وتحويلها إلى صور، وهنا مطلب جديد: لقطة شاشة لصفحات الويب وحفظها كملفات PDF ليتمكن المستخدمون من تنزيلها.

استخدام اللوحة القماشية لحفظ صفحات الويب كملفات pdf يدعم النطاقات المشتركة

المتطلبات: ينقر المستخدم على تنزيل، ويحفظ الصفحة كملف PDF ويقوم بتنزيلها.

الفكرة: استمر في استخدام Canvas لالتقاط لقطات شاشة وتحويل محتوى اللوحة إلى ملفات pdf.

نحتاج أولاً إلى تقديم مسار تنزيل ملف js jspdf.debug.js https://github.com/MrRio/jsPDF

تقديم ملف js الخاص بـ Canvas، الصفحة الرئيسية للموقع الرسمي لعنوان الحصول على ملف js: http://html2canvas.hertzen.com/

 <script type=text/javascript src=js/html2canvas.js></script><script type=text/javascript src=js/html2canvas.min.js></script><script type=text/javascript src=js /jspdf.debug.js></script>

رمز زر div

 <div id=down_pdf>زر التصدير إلى PDF</div> <div class=sta-main>القسم الذي يجب الحصول عليه بصيغة PDF</div>

كود جي اس بي

 <script type=text/javascript>/* var downPdf = document.getElementById(down_pdf); */var downPdf = document.getElementById(down_pdf);$(#down_pdf).on(click, function() { var Canvas2 = document) .createElement(canvas); Let _canvas = document.querySelector('.sta-main'); // احصل على العرض والارتفاع var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas) .height); // تكبير اللوحة القماشية مرتين، ثم وضعها في حاوية صغيرة للتعامل مع التمويه Canvas2.width = w * 2; Canvas2.height = h * 2; Canvas2.style.width = w + px; px; var context = Canvas2.getContext(2d); // إزاحة العملية context.scale(1.5, 1.5); // تعديل لون الخلفية، اللون الافتراضي هو الأسود $('.sta-main').css(background, # fff) html2canvas( _canvas, { // تعامل مع مشكلة فشل pdf عبر المجال في الحصول على معلومات عبر المجال taintTest : false, useCORS : true,allowTaint : false, Canvas : Canvas2, dpi: 172, // تصدير وضوح ملف pdf عند العرض: function (canvas) { var contentWidth = Canvas.width; var contentHeight = Canvas.height; // تعرض صفحة واحدة من ملف pdf ارتفاع اللوحة القماشية التي أنشأتها صفحة html؛ * 841.89 ؛ // ارتفاع صفحة HTML بدون إنشاء ملف pdf var leftHeight = contentHeight; // إزاحة صفحة PDF var Position = 0; // عرض اللوحة القماشية التي أنشأتها صفحة html وارتفاعها في صورة pdf (حجم ورق a4 [595.28,841.89]) var imgWidth = 595.28; var imgHeight = 592.28 / contentWidth * contentHeight; 'image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); // هناك ارتفاعان يجب التمييز بينهما، أحدهما هو الارتفاع الفعلي لصفحة html، وارتفاع الصفحة لملف pdf الذي تم إنشاؤه (841.89) // عندما لا يتجاوز المحتوى نطاق العرض صفحة pdf، لا يلزم الترحيل if (leftHeight <pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight } else { while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0,position, imgWidth, imgHeight) leftHeight -=pageHeight;position -= 841.89; // تجنب إضافة صفحات فارغة if (leftHeight > 0) { pdf.addPage(); pdf.save('اسم PDF.pdf'); $('.sta-main').css(background, )})</script>

هذه المرة تم تغيير صفحة الويب إلى PDF، وتكون آخر لقطة شاشة لصفحة الويب هي PNG، وباستخدام نفس التقنية، يستخدم كلاهما Canvas لالتقاط اللوحة القماشية أولاً ثم تحويل التنسيق.

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

سيؤدي تحويل PDF إلى جعل لون الخلفية أسودًا، ما عليك سوى استخدام نمط CSS لتغيير لون الخلفية.

التحويل المثالي إلى pdf.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.