ผู้ใช้กรอกแบบฟอร์มและคลิกเพื่อบันทึกและสามารถดาวน์โหลดเอกสาร PDF ได้โดยตรง
สารละลาย การสร้างเซิร์ฟเวอร์ความคิด
Google Chrome พัฒนาคุณสมบัติ Chrome Headless ของตัวเองในปี 2560 และเปิดตัว Puppeteer ในเวลาเดียวกัน สามารถเข้าใจได้ว่าเป็นเบราว์เซอร์ที่ไม่มีส่วนต่อประสาน แต่สามารถทำให้คุณสมบัติการทำงานของเซิร์ฟเวอร์เสร็จสมบูรณ์
ดังนั้นเราสามารถเริ่มต้นเบราว์เซอร์ Puppeteer บนเซิร์ฟเวอร์เปิด URL ปลายทางและใช้ฟังก์ชั่นการแปลงที่ได้รับจากเบราว์เซอร์ Chrome เพื่อแปลง HTML เป็น PDF
การสร้างรหัสหลักบนเซิร์ฟเวอร์ก่อนอื่นคุณต้องติดตั้ง Puppeteer อาจมีข้อผิดพลาดในการติดตั้ง NPM เป็นการดีที่สุดที่จะใช้ภาพ CNPM Taobao เพื่อติดตั้ง
ป้อน cnpm i puppeteer -S การติดตั้งการติดตั้ง
ในการสร้างไฟล์ JS คุณจะต้องเปิด URL ด้วยเบราว์เซอร์ Puppeteer และบันทึก PDF
// html2pdf.jsconst puppeteer = ต้องการ ('puppeteer'); (ฟังก์ชั่น async () {// เริ่มต้นใช้บริการเบราว์เซอร์ const = รอ Puppeteer.launch (); // เปิดแท็บหน้า const = รอคอย page.goto ('https://koa.bootcss.com/#context'); จากนั้นป้อน node html2pdf.js บนคอนโซลเพื่อเริ่มบริการ
แน่นอน Module.Export ยังสามารถส่งออกวิธีการโมดูลตามตรรกะทางธุรกิจ
ข้อบกพร่อง
ไม่สามารถบันทึกข้อมูลแบบไดนามิกในแบบฟอร์ม
เนื่องจากเป็นหน้าคำขอจากเซิร์ฟเวอร์หากไม่ได้บันทึกการป้อนข้อมูลของผู้ใช้ในที่อยู่คำขอ PDF ที่ถูกตัดออกจะเป็นสถานะเริ่มต้นที่ไม่ได้กรอกข้อมูลหน้าเว็บ
กล่าวอีกนัยหนึ่งมันสามารถแปลงหน้าคงที่เท่านั้นเพราะความต้องการของเรามีผู้ใช้จำนวนมากดังนั้นผ่าน
ไคลเอนต์สร้างรหัสหลักความคิด
ข้อบกพร่อง
การบิดเบือน
เราสามารถพบได้อย่างชัดเจนว่าเนื่องจากมันคล้ายกับการแทรกภาพหน้าจอลงใน PDF บนหน้าความละเอียดและการกำหนดค่าของหน้ามีแนวโน้มที่จะส่งผลกระทบต่อคุณภาพของภาพเอาต์พุต
ในเวลาเดียวกันเนื่องจากเป็นภาพหน้าจอลิงค์หน้าและฟังก์ชั่นอื่น ๆ อาจหายไป
ตัดข้อความ
เมื่อผืนผ้าใบผืนผ้าใบมีขนาดใหญ่กว่าหนึ่งหน้าของ PDF เอาต์พุตจะเกิดข้อผิดพลาด ในเวลานี้เราจำเป็นต้องพิจารณาว่าผืนผ้าใบผ้าใบเกินขนาด A4 หรือไม่ หากเกินกว่าผืนผ้าใบให้แบ่งส่วนผืนผ้าใบและแทรกลงในหน้าอื่น
ปัญหามาอีกครั้งในเวลานี้ เนื่องจากมันแยกภาพจึงเป็นไปได้ว่ารูปภาพหรือข้อความจะถูกตัดทอนจากครึ่งหนึ่งเพราะเราไม่สามารถวิเคราะห์โครงสร้างของรายการภายในผืนผ้าใบได้
รหัสหลัก
ความต้องการของเราไม่มีรูปภาพและลิงก์ดังนั้นปัญหาการบิดเบือนจึงมีผลกระทบเล็กน้อยต่อเรา ในเวลาเดียวกันรูปแบบของเราประกอบด้วยหลายรายการที่มีความยาวเท่ากันซ้ำกันและรายการเหล่านี้สั้นมากและจะไม่เกินหนึ่งชิ้นของกระดาษ A4 (แม้ว่าจะไม่เข้มงวดหากจำเป็นคุณจะได้รับความกว้างและความสูงขององค์ประกอบ DOM และตัดตามความสูงขององค์ประกอบ DOM)
ดังนั้นฉันวางแผนที่จะแบ่งผืนผ้าใบโดยตรงตามรายการและบันทึกแต่ละรายการลงในหน้ากระดาษ A4
ต้องเข้าใจวิธีการหลักหลายวิธีก่อนที่จะเริ่ม:
html2canvas
// dom เป็นโหนด DOM ที่จะแปลง html2canvas (dom, {backgroundColor: #FFFFFF, ความกว้าง: ความกว้าง, ความสูง: ความสูง, ขนาด: 2, NorthTaint: true,}) จากนั้น ((ผ้าใบ) => {// Canvas เป็นผืนผ้าใบjspdf
// สร้างอินสแตนซ์ให้ pdf = new jspdf ('', 'pt', 'a4'); // เพิ่มภาพลงในไฟล์ PDF // พารามิเตอร์แรกคือรูปแบบไฟล์ (base64) ที่จะแทรก, ที่สองคือรูปแบบไฟล์ // ที่สามและสี่เป็นพิกัดในมุมซ้ายบนของรูปภาพและสองความกว้างและความสูงของภาพ // เพิ่มหน้าใหม่ pdf.addpage () // บันทึกไฟล์ pdf pdf.save ()ผ้าใบ
// Canvas เป็นภาพที่จะถูกตัด // sx, sy เป็นพิกัดที่จะเริ่มต้นการครอบตัด // swidth และ sheight คือความกว้างและความสูงของการครอบตัด // dx และ dy เป็นพิกัดที่แทรกในภาพหลังจาก cropping // swidth, sheight คือความกว้างและความสูงของภาพ Swidth, Sheight);
/*** @description: แบบฟอร์มเป็นไฟล์ pdf* @return: pdf*/onsubmit () {// นี่คือแบบฟอร์มที่ฉันต้องการแปลงมีตารางที่คล้ายกันมากมายในรูปแบบ let = this. $ refs.form; // รับความกว้างและความสูงขององค์ประกอบให้ความกว้าง = form.getBoundingClientRect (). ความกว้าง; ให้ความสูง = form.getBoundingClientRect (). ความสูง; html2canvas (รูปแบบ, {backgroundColor: #FFFFFF, ความกว้าง: ความกว้าง, ความสูง: ความสูง, ขนาด: 2, allowTaint: true,}) จากนั้น ((ผ้าใบ) => {ให้ pdf = new jspdf ('', 'pt', 'a4'); this.splitcanvas (Canvas, thatforms.length); 72-Resolution Monitor PDF.addimage (itemimage, 'jpeg', 10,10,575.28,575.28/item.width*item.height); pdf.save ('test.pdf');})},/*** @description: ตัดผ้าใบ* @param {number} จำนวนของชิ้น* @param {canvas} canvas* @return ให้ chunkheight = ความสูง/num; // ความสูงของแต่ละชิ้นให้ chunklist = []; // การจัดเก็บผืนผ้าใบผลลัพธ์สำหรับ (ให้ i = 0; i <ความสูง; i+= chunkheight) {// เริ่มต้นตำแหน่งของกล่องสี่เหลี่ยมผืนผ้า let sx = 0, sy = i, swidth = width, sheight, sheight, // สร้างโหนด Canvas Let CanvasItem = document.createElement (Canvas); // เริ่มต้นขนาดผ้าใบ canvasitem.height = chunkheight; CanvasItem.width = ความกว้าง; ให้ cxt = canvasitem.getContext (2d); // ใส่ภาพที่ถูกครอบตัดลงในโหนดผ้าใบใหม่ CXT.DrawImage (Canvas, SX, SY, Swidth, Sheight, DX, DY, Swidth, Sheight); chunklist.push (Canvasitem); } return chunklist;}, ผลสุดท้ายหน้าหลังจากบันทึกแบบฟอร์ม
ผลของการแปลงเป็น PDF
นี่คือบทความเกี่ยวกับโซลูชันการใช้งานไคลเอนต์บริสุทธิ์และเซิร์ฟเวอร์บริสุทธิ์ของ HTML ถึง PDF สำหรับเนื้อหา HTML ที่เกี่ยวข้องกับ PDF เพิ่มเติมโปรดค้นหาบทความก่อนหน้าจาก Wulin.com หรือดำเนินการเรียกดูบทความที่เกี่ยวข้องด้านล่าง ฉันหวังว่าทุกคนจะสนับสนุน Wulin.com ในอนาคต!