ฉันต้องการทำฟังก์ชั่นเพื่อส่งออก 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. ประกาศวัตถุคำนิยามเอกสารในรหัส JS ซึ่งเป็นคำศัพท์ของ PDFMake เพื่อให้ง่ายมันคือการสร้างวัตถุที่มีแอ็ตทริบิวต์เนื้อหาอย่างน้อย จากนั้นคุณสามารถโทรหาวิธี PDFMake เพื่อส่งออก PDF ดูรหัสต่อไปนี้:
<script type = "text/javascript"> // สร้างวัตถุเอกสารการกำหนดเอกสาร var dd = {content: ['หนึ่งย่อหน้า', 'ย่อหน้าอื่น, คราวนี้นานขึ้นเล็กน้อยเพื่อให้แน่ใจว่าบรรทัดนี้จะถูกแบ่งออกเป็นอย่างน้อยสองบรรทัด']}; // ส่งออก pdf pdfmake.createpdf (dd) .download (); </script>ทำตามตัวอย่างด้านบนและคุณจะเห็นไฟล์พรอมต์ที่จะดาวน์โหลด สำหรับการสอนที่สมบูรณ์เกี่ยวกับ PDFMake โปรดเข้าสู่ระบบ PDFMake เพื่อดู
PDFMake สนับสนุนภาษาจีน
สามขั้นตอน:
1. ไปที่เว็บไซต์ PDFMake Project ดาวน์โหลดโครงการทั้งหมดจากนั้นป้อนไดเรกทอรีโครงการและใส่ไฟล์ตัวอักษร (เช่น Microsoft Yahei.ttf) ลงในไดเรกทอรีตัวอย่าง/แบบอักษรจากนั้นใช้ Grunt Dump_dir เพื่อสร้างไฟล์ VFS_FONTS.JS ใหม่
จากคำอธิบายข้างต้นเราจะเห็นได้ว่าโครงการได้รับการจัดการผ่านคำราม หากไม่มีความรู้ที่เกี่ยวข้องโปรดไปออนไลน์และสอนก่อน
คำสั่ง Grunt dump_dir จะบรรจุไฟล์ทั้งหมดในไดเรกทอรีฟอนต์ดังนั้นโปรดอย่าใส่ไฟล์ที่ไร้ประโยชน์ไว้ในนั้น
Microsoft Yahei.ttf ค้นหาออนไลน์และไดเรกทอรีที่สามารถเก็บแบบอักษรภายใต้ดิสก์ระบบคอมพิวเตอร์ของ Windows
2. กลับไปที่รหัสตัวอย่างของคุณเองแก้ไขวัตถุฟอนต์ของ PDFMake ในรหัส JS และประกาศว่าตัวอักษรที่คุณต้องการใช้:
pdfmake.fonts = {roboto: {ปกติ: 'Roboto-regular.ttf', bold: 'Roboto-medium.ttf', italics: 'Roboto-italic.ttf', boldtalics: 'roboto-italic.ttf', boldtalics: 'Microsoft Yahei.ttf', Bold: 'Microsoft Yahei.ttf', ตัวเอียง: 'Microsoft Yahei.ttf',}};3. ประกาศตัวอักษรที่จะใช้โดยค่าเริ่มต้นในวัตถุเอกสารกำหนดเอกสาร โดยเฉพาะ: มันคือการประกาศวัตถุ นอกเหนือจากแอตทริบิวต์เนื้อหาแล้วยังต้องการแอตทริบิวต์ defaultStyle มีแอตทริบิวต์ฟอนต์อื่นภายใต้ DefaultStyle:
var dd = {เนื้อหา: ['การทดสอบภาษาจีนและภาษาอังกฤษ', 'ย่อหน้าอื่นคราวนี้นานขึ้นเล็กน้อยเพื่อให้แน่ใจว่าบรรทัดนี้จะถูกแบ่งออกเป็นอย่างน้อยสองบรรทัด'], defaultStyle: {ตัวอักษร: 'Microsoft Yahei'}};ต่อไปนี้เป็นตัวอย่างซอร์สโค้ดตัวอย่างที่สมบูรณ์ตามขั้นตอนข้างต้น:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> การส่งออกครั้งแรกของฉัน pdf </title> <script src = "build/pdfmake.min.js"> </script> = {เนื้อหา: ['การทดสอบภาษาจีนและภาษาอังกฤษ', 'อีกย่อหน้าคราวนี้นานขึ้นเล็กน้อยเพื่อให้แน่ใจว่าบรรทัดนี้จะถูกแบ่งออกเป็นอย่างน้อยสองบรรทัด'], defaultStyle: {font: 'Microsoft Yahei'}}; pdfmake.fonts = {Roboto: {ปกติ: 'Roboto-regular.ttf', Bold: 'Roboto-Medium.ttf', ตัวเอียง: 'Roboto-italic.ttf', boldalics: 'Roboto-italic.ttf', Boldalics: pdfmake.createpdf (dd) .download (); } </script> </head> <body> <button onclick = "down ()"> ดาวน์โหลด </button> </body> </html>แทรกรูปภาพ
ในแง่ของการแทรกภาพ JSPDF ต้องการให้ภาพถูกแปลงเป็น URL ข้อมูลก่อนและ PDFMake อนุญาตให้ระบุเส้นทางโดยตรงซึ่งดูเหมือนจะสะดวกมาก แต่นี่เป็นเงื่อนไขและต้องใช้เป็นเซิร์ฟเวอร์
เพื่อแก้ปัญหานี้ฉันเขียนวัตถุฟังก์ชั่นของ Imagedataurl ที่สามารถส่งผ่านที่อยู่ภาพหลายภาพในเวลาเดียวกัน หลังจากโหลดภาพทั้งหมดแล้ว imagedataurl.oncomplete จะถูกเรียกใช้ URL ข้อมูลของแต่ละภาพถูกนำออกมาผ่านสิ่งนี้ Imgdata ในการโทรกลับ PDF สามารถสร้างได้อย่างถูกต้องตามข้อกำหนดของ PDFMake
หลักการของ imagedataurl คือการวาดภาพบนแท็กผ้าใบของ H5 จากนั้นรับ URL ข้อมูลของภาพผ่าน todataurl ของผืนผ้าใบ โปรดให้ความสนใจกับปัญหาความเข้ากันได้ของเบราว์เซอร์เมื่อใช้งาน
ต่อไปนี้เป็นตัวอย่างของการเขียน sampleImage.jpg, sampleage.jpg, sampleImage.jpg เป็น PDF ตามลำดับ sampleage.jpg ไม่มีอยู่ระหว่างการทดสอบและ PDF จะถูกละเว้นโดยตรง
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> การส่งออกครั้งที่สองของฉัน pdf </title> <script src = "build/pdfmake.min.js"> </script> ใหม่ imagedataurl (["sampleImage.jpg", "sampleImage.jpg"]); x.oncomplete = function () {var imgs = new Array (); console.log ("เสร็จสมบูรณ์"); สำหรับ (คีย์ใน this.imgdata) {ถ้า (this.imgdata [key] == this.emptyobj) // ละเว้นรูปภาพที่ไม่มีอยู่จริง imgs.push ({image: this.imgdata [key]}); // รูปแบบรูปภาพของ pdfmake {image: image dataurl}} var dd = {เนื้อหา: ['title', imgs,],}; pdfmake.createpdf (dd) .download (); }} </script> </head> <body> <button onclick = "down ()"> ดาวน์โหลด </button> <script> ฟังก์ชั่น imagedataurl (urls) {// url ต้องเป็นสตริงหรือสตริงอาร์เรย์ this.compleTenum = 0; this.totalnum = 0; this.imgdata = new Array (); this.empyObj = New Object (); this.oncomplete = function () {}; this.getDataUrl = function (url, index) {var c = document.createElement ("Canvas"); var cxt = c.getContext ("2d"); var img = ภาพใหม่ (); var dataurl; var p; p = สิ่งนี้; img.src = url; img.onload = function () {var i; var maxwidth = 500; var scale = 1.0; if (img.width> maxWidth) {scale = maxWidth / img.width; C.Width = MaxWidth; C.Height = math.floor (img.height * scale); } else {c.width = img.width; C.Height = img.height; } cxt.drawimage (img, 0, 0, c.width, c.height); P.Imgdata [ดัชนี] = C.TodataUrl ('Image/JPEG'); สำหรับ (i = 0; i <p.totalnum; ++ i) {ถ้า (p.imgdata [i] == null) break; } if (i == p.totalnum) {p.oncomplete (); - img.onerror = function () {p.imgdata [ดัชนี] = P.EmpyObj; สำหรับ (i = 0; i <p.totalnum; ++ i) {ถ้า (p.imgdata [i] == null) break; } if (i == p.totalnum) {p.oncomplete (); - } if (urls อินสแตนซ์ของอาร์เรย์) {this.totalnum = urls.length; this.imgdata = อาร์เรย์ใหม่ (this.totalnum); สำหรับ (คีย์ใน URL) {this.getDataUrl (URL [key], key); }} else {this.imgdata = อาร์เรย์ใหม่ (1); this.totalnum = 1; this.getDataurl (urls, 0); }} </script> </body> </html>วิธีการข้างต้นในการส่งออกปลั๊กอิน PDF โดย JS (สนับสนุนเส้นทางการใช้งานภาษาจีนและรูปภาพ) เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น