أريد أن أفعل وظيفة لتصدير PDF على الويب. لقد وجدت أن JSPDF يوصى به العديد من الناس. لسوء الحظ ، فإنه لا يدعم الصينية. أخيرًا ، وجدت pdfmake ، والتي حلت هذه المشكلة بشكل جيد. يمكن الاطلاع على تأثيره أولاً على http://pdfmake.org/playground.html. أثناء الاستخدام ، وجد أيضًا أن إدخال الصور كان شيئًا مرهقًا نسبيًا.
استجابة لهذه القضايا ، يمكن تقسيم المحتوى الرئيسي لهذه المقالة إلى ثلاثة أجزاء:
• طريقة الاستخدام الأساسية لـ PDFMake ؛
• كيفية حل المشاكل الصينية ؛
• كيفية إدخال الصور من خلال تحديد عنوان الصورة.
طريقة الاستخدام الأساسية لـ PDFMake
1. يحتوي على الملفان التاليان
<script src = "build/pdfmake.min.js"> </script> <script src = "build/vfs_fonts.js"> </script>
2. إعلان كائن Definition المستند في رمز JS ، وهو مصطلح PDFMake. بكل بساطة ، هو إنشاء كائن يحتوي على سمة المحتوى على الأقل. ثم يمكنك استدعاء طريقة pdfmake لتصدير PDF ، راجع الكود التالي:
<script type = "text/javaScript"> // إنشاء كائن مستند definition var dd = {content: ['paragraph' ، 'فقرة أخرى ، هذه المرة لفترة أطول قليلاً للتأكد ، سيتم تقسيم هذا الخط إلى سطرين على الأقل']} ؛ // Export pdf pdfmake.createpdf (dd) .Download () ؛ </script>اتبع المثال أعلاه وسترى ملف المطالبة المراد تنزيله. للحصول على برنامج تعليمي كامل حول PDFMake ، يرجى تسجيل الدخول إلى مشروع PDFMake لعرضه.
PDFMake يدعم الصينية
ثلاث خطوات:
1. انتقل إلى موقع PDFMake Project ، وقم بتنزيل جميع المشاريع ، ثم أدخل دليل المشروع ووضع ملف الخط (مثل Microsoft yahei.ttf) في دليل الأمثلة/الخطوط ، ثم استخدم Grunt Dump_dir لإنشاء ملف VFS_FONTS.JS جديد ؛
من الوصف أعلاه ، يمكننا أن نرى أن المشروع تتم إدارته من خلال Grunt. إذا لم تكن هناك معرفة ذات صلة ، فيرجى الاتصال بالإنترنت وأخذ دروسًا دروسًا أولاً.
سيقوم الأمر Grunt Dump_dir بتعبئة جميع الملفات في دليل الخطوط ، لذا يرجى عدم وضع ملفات عديمة الفائدة فيه.
يمكن أيضًا العثور على Microsoft Yahei.ttf عبر الإنترنت ، والدليل الذي يتم فيه تخزين الخطوط تحت قرص نظام Windows Computer System.
2. ارجع إلى رمز المثال الخاص بك ، وقم بتعديل كائن الخطوط الخاص بـ PDFMake في رمز JS وأعلن أن الخط الذي تريد استخدامه:
pdfmake.fonts = {roboto: {normal: 'roboto-regular.ttf' ، Bold: 'Roboto-medium.ttf' ، mitalics: 'roboto-iTalic.ttf' ، boldtalics: 'roboto-iTalic.ttf' ، boldtalics: 'Roboto-iT. 'Microsoft yahei.ttf' ، Bold: 'Microsoft yahei.ttf' ، mithitics: 'Microsoft yahei.ttf' ،}} ؛3. أعلن أن الخط ليتم استخدامه افتراضيًا في كائن الوثيقة. على وجه التحديد: هو إعلان كائن. بالإضافة إلى سمة المحتوى ، فإنه يحتاج أيضًا إلى سمة افتراضية. هناك سمة خط أخرى تحت الافتراضي:
var dd = {content: ['الصينية والإنجليزية' ، 'فقرة أخرى ، هذه المرة لفترة أطول قليلاً للتأكد من أن هذا الخط سيتم تقسيمه إلى خطين على الأقل'] ، الافتراضي: {font: 'Microsoft Yahei'}} ؛فيما يلي مثال كامل رمز مصدر بناءً على الخطوات المذكورة أعلاه:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> أول تصدير pdf </title> <script src = "build/pdfmake.min.js"> </script> {var dd = {content: ['الصينية والإنجليزية' ، 'فقرة أخرى ، هذه المرة لفترة أطول قليلاً للتأكد من أن هذا الخط سيتم تقسيمه إلى سطرين على الأقل'] ، defaultStyle: {font: 'microsoft yahei'}} ؛ pdfmake.fonts = {roboto: {normal: 'roboto-regular.ttf' ، Bold: 'Roboto-medium.ttf' ، mithitics: 'Roboto-Italic.ttf' ، Boldalics: 'Roboto-Italic.ttf' ، boldalics: 'Roboto-iTtf' ،} ؛ pdfmake.createpdf (dd) .download () ؛ } </script> </head> <body> <button onClick = "Down ()"أدخل الصورة
فيما يتعلق بإدخال الصور ، يتطلب JSPDF تحويل الصورة إلى عنوان URL للبيانات أولاً ، ويسمح PDFMake بتحديد مسارات مباشرة ، والتي تبدو مريحة للغاية ، ولكن هذا مشروط ، ويجب استخدامه كخادم ، أو وضع الصورة في VFS_FONTS.JS ، لذلك بشكل عام ، لا يزال مفيدًا للغاية ، لذلك لا يزال لديك تحويل الصورة إلى البيانات.
لحل هذه المشكلة ، كتبت كائن وظيفة من Imagedataurl يمكن أن يمر في عناوين صور متعددة في نفس الوقت. بعد تحميل جميع الصور ، سيتم تشغيل imagedataurl.oncomplete. يتم إخراج عنوان URL للبيانات لكل صورة من خلال هذا. imgdata في رد الاتصال. يمكن إنشاء PDF بشكل صحيح وفقًا لمتطلبات PDFMake.
يتمثل مبدأ Imagedataurl في رسم الصورة على علامة قماش H5 ، ثم الحصول على عنوان URL للبيانات للصورة من خلال todataurl من القماش. يرجى الانتباه إلى مشكلات توافق المتصفح عند استخدامه.
فيما يلي مثال على كتابة sampleimage.jpg ، sampleage.jpg ، sampleimage.jpg إلى pdf بالتسلسل. Samplege.jpg غير موجود أثناء الاختبار ، ويتم تجاهل PDF مباشرة.
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> تصديرتي الثانية pdf </itlect> <script src = "build/pdfmake.min.js"> </script> {var x = new imagedataurl (["" sampleimage.jpg "،" sampleimage.jpg "]) ؛ x.oncomplete = function () {var imgs = new array () ؛ console.log ("كاملة") ؛ لـ (مفتاح في this.imgdata) {if (this.imgdata [key] == this.emptyobj) // تجاهل الصور غير الموجودة ؛ imgs.push ({Image: this.imgdata [key]}) ؛ // pdfmake format {Image: Image dataurl}} var dd = {content: ['title' ، imgs ،] ،} ؛ pdfmake.createpdf (dd) .download () ؛ }} </script> </head> <body> <button onClick = "Down ()"> تنزيل </button> <script> وظيفة imagedataurl (urls) {// urls يجب أن تكون سلسلة أو مجموعة سلسلة this. this.totalnum = 0 ؛ this.imgdata = new array () ؛ this.emptyobj = new Object () ؛ this.oncomplete = function () {} ؛ this.getDataurl = function (url ، index) {var c = document.createElement ("canvas") ؛ var cxt = c.getContext ("2d") ؛ var img = new image () ؛ var dataurl ؛ var p ؛ P = هذا ؛ img.src = url ؛ img.onload = function () {var i ؛ var maxwidth = 500 ؛ VAR مقياس = 1.0 ؛ if (img.width> maxwidth) {scale = maxwidth / img.width ؛ c.width = maxwidth ؛ C.Height = Math.Floor (Img.height * Scale) ؛ } آخر {c.width = img.width ؛ C.Height = img.height ؛ } cxt.drawImage (img ، 0 ، 0 ، c.width ، C.Height) ؛ P.ImgData [index] = c.todataurl ('Image/JPeg') ؛ لـ (i = 0 ؛ i <p.totalnum ؛ ++ i) {if (p.imgdata [i] == null) break ؛ } if (i == p.totalnum) {p.onComplete () ؛ }} ؛ img.onerror = function () {p.imgdata [index] = p.emptyobj ؛ لـ (i = 0 ؛ i <p.totalnum ؛ ++ i) {if (p.imgdata [i] == null) break ؛ } if (i == p.totalnum) {p.onComplete () ؛ }} ؛ } if (urls extryof array) {this.totalNum = urls.length ؛ this.imgdata = صفيف جديد (this.totalnum) ؛ لـ (المفتاح في urls) {this.getDataurl (urls [key] ، key) ؛ }} else {this.imgData = new Array (1) ؛ this.totalnum = 1 ؛ this.getDataurl (urls ، 0) ؛ }} </script> </body> </html>إن الطريقة المذكورة أعلاه لتصدير المكونات الإضافية لـ PDF بواسطة JS (دعم مسارات استخدام الصور الصينية والمواصفة) هي كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.