คำอธิบายโดยละเอียดเกี่ยวกับการใช้ Canvas เพื่อบันทึกหน้าเว็บเป็นไฟล์ pdf และรองรับการข้ามโดเมน

ในบทความก่อนหน้านี้ ฉันได้กล่าวถึงว่า Canvas จับภาพหน้าจอหน้าเว็บเป็นรูปภาพ ข้อกำหนดใหม่: จับภาพหน้าจอหน้าเว็บและบันทึกเป็นไฟล์ PDF เพื่อให้ผู้ใช้ดาวน์โหลด

การใช้ Canvas เพื่อบันทึกหน้าเว็บเป็นไฟล์ pdf รองรับการข้ามโดเมน

ข้อกำหนด: ผู้ใช้คลิกดาวน์โหลด บันทึกเพจเป็นไฟล์ PDF และดาวน์โหลด

แนวคิด: ใช้ Canvas ต่อไปเพื่อจับภาพหน้าจอและแปลงเนื้อหา 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>div ที่ต้องได้รับเป็น PDF</div>

รหัสเจเอสพี

 <script type=text/javascript>/* var downPdf = document.getElementById(down_pdf); */var downPdf = document.getElementById(down_pdf);$(#down_pdf).on(คลิก, ฟังก์ชั่น() { var canvas2 = เอกสาร .createElement(canvas); ให้ _canvas = document.querySelector('.sta-main'); // รับความกว้างและความสูง var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas) .height); // ขยายผืนผ้าใบขึ้น 2 เท่า จากนั้นวางไว้ในคอนเทนเนอร์ขนาดเล็กเพื่อจัดการ canvas2.width ที่เบลอ = w * 2; canvas2.height = h * 2; canvas2.style.width = w + px; canvas2.style.height = h + px; var context = canvas2.getContext(2d); //Process offset context.scale(1.5, 1.5); //แก้ไขสีพื้นหลัง, ค่าเริ่มต้นคือสีดำ $('.sta-main').css(พื้นหลัง, # 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; // PDF ชดเชยตำแหน่ง var = 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 ไม่จำเป็นต้องมีเพจถ้า (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight); } else { while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, ตำแหน่ง, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //หลีกเลี่ยงการเพิ่มหน้าว่างถ้า (leftHeight > 0) { pdf.addPage(); pdf.save('PDF name.pdf'); $('.sta-main').css(พื้นหลัง, )})</script>

คราวนี้เว็บเพจเปลี่ยนเป็น PDF และภาพหน้าจอสุดท้ายของเว็บเพจคือ PNG โดยใช้เทคโนโลยีเดียวกัน โดยทั้งคู่ใช้ Canvas เพื่อจับภาพแคนวาสก่อนแล้วจึงแปลงรูปแบบ

นอกจากนี้ยังมีปัญหาต่างๆ เช่น การชดเชย การเบลอ ข้ามโดเมน ฯลฯ ซึ่งสามารถจัดการได้โดยใช้โค้ดก่อนหน้า

การแปลง PDF จะทำให้สีพื้นหลังเป็นสีดำ เพียงใช้สไตล์ css เพื่อเปลี่ยนสีพื้นหลัง

การแปลงเป็น pdf ที่สมบูรณ์แบบ

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network