คำอธิบายโดยละเอียดเกี่ยวกับการดำเนินงานที่เกี่ยวข้องกับการพิมพ์ HTML และการดำเนินการ

หลักการคือการเรียกใช้วิธี window.print () แต่วิธีนี้สามารถพิมพ์หน้าปัจจุบันทั้งหมดได้เท่านั้นดังนั้นวิธีการแก้ปัญหาต่อไปนี้คือการแก้ปัญหาการพิมพ์ในท้องถิ่น

 // ตัวอย่างรหัสฟังก์ชั่นพิมพ์ () {ให้ ifelement = document.getElementById ('ifid') const addhtmlprint = () => {const content = ifelement.contentWindow || ifelement.contentDocument Content.document.body.innerhtml = this.detailtable const styelele = document.createElement ('style') /* ลบส่วนหัวและส่วนท้ายเมื่อพิมพ์* / styele.innerhtml = '@media พิมพ์ {@page {margin: 5 มม.; }} 'content.document.getElementsByTagname (' head ') [0] .AppendChild (Styleele) / * ตรวจสอบให้แน่ใจว่าการโหลดทรัพยากรใน iframe เสร็จสมบูรณ์รูปภาพควรได้รับการแนะนำในรูปแบบ img * / ifelement.onload = () => {content.print () addhtmlprint ()} else {ifelement = document.createElement ('iframe') ifelement.setAttribute ('id', 'ifid') ifelement.setAttribute ('style', 'แสดง: ไม่มี') document.body.appendchild

 @media print { / * ที่นี่องค์ประกอบที่ไม่จำเป็นต้องพิมพ์ถูกตั้งค่าให้ไม่แสดง * / .hided-etement {display: none; /* ทัศนวิสัย: ซ่อน; */}/*กระดาษถูกตั้งค่าเป็นความกว้าง 1200px และความสูง 800px*/ @Page {ขนาด: 1200px 800px; -

• <link href = /example.css media = print rel = stylesheet /> annotate สไตล์ที่จะใช้เมื่อพิมพ์
• ฟังหน้าต่างเหตุการณ์การพิมพ์ AddEventListener ('beforePrint || afterprint', () => {});

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น