Penjelasan terperinci tentang operasi dan implementasi terkait pencetakan HTML

Penulis：Eve Cole Waktu Pembaruan：2025-04-12 02:00:03

Prinsipnya adalah memanggil metode window.print (), tetapi metode ini hanya dapat mencetak semua halaman saat ini, sehingga solusi berikut adalah untuk menyelesaikan pencetakan lokal.

1: Gunakan iframe untuk menyuntikkan elemen dan gaya yang perlu dicetak dan kemudian hubungi cetakan

 // Contoh kode fungsi print () {let ifeLement = document.geteLementById ('ifid') const addHtmlprint = () => {const content = ifeLement.contentWindow || ifelement.contentDocument content.document.body.innerHtml = this.detailtable const styleele = document.createElement ('style') /* Lepaskan header dan footer saat mencetak* / styleele.innerHtml = '@media cetak {@page {margin: 5mm; }} 'content.document.getElementsbyTagname (' head ') [0] .AppendChild (styleele) / * Pastikan bahwa pemuatan sumber daya di iframe selesai, gambar harus diperkenalkan dalam bentuk IMG * / ifelement.onload = () => {content.print () {ifeLement ifelement () {content.print.print ()} {ifeLement.onLement =) {content.print ()} {ifeLement.) addHtmlprint ()} else {ifeLement = document.createElement ('iframe') ifeLement.setAttribute ('id', 'ifid') ifeLement.setAttribute ('style', 'Display: none') document.body.appendChild (ifeLement) addHtMlPrint ()}}}}}}}}}} i ifelement}

2: Gunakan @Media cetak untuk mengatur operasi cetak pada halaman saat ini.

 @media cetak { / * di sini, elemen-elemen yang tidak perlu dicetak diatur untuk tidak menampilkan * / .hidden-element {display: none; /* visibilitas: tersembunyi; */}/*Kertas diatur ke lebar 1200px dan tinggi 800px*/ @page {size: 1200px 800px; }}

<tautan href = /example.css media = print rel = stylesheet /> anotasi gaya yang akan digunakan saat mencetak
Dengarkan cetak acara window.addeventListener ('beforeprint || afterprint', () => {});

Di atas adalah semua konten artikel ini. Saya harap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.