Bagaimana untuk melaksanakan fungsi pratonton cetakan dalam javascript-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk melaksanakan fungsi pratonton cetakan dalam javascript

PHPz

Lepaskan： 2023-04-19 14:40:33

asal

1912 orang telah melayarinya

Dengan perkembangan pesat teknologi rangkaian, aplikasi Internet menjadi semakin meluas, yang mana aplikasi web juga telah menjadi bahagian yang sangat diperlukan. Dalam banyak aplikasi web, fungsi pencetakan adalah fungsi yang sangat penting, tetapi dalam pelayar dan sistem pengendalian yang berbeza, kesan pencetakan mungkin berbeza, jadi kita perlu melakukan pratonton cetakan untuk memastikan ketepatan kesan pencetakan. Kaedah melaksanakan pratonton cetakan dalam JavaScript juga menarik lebih banyak perhatian daripada pembangun.

Pengetahuan prasyarat

Sebelum memperkenalkan kaedah melaksanakan pratonton cetakan dalam JavaScript, kita perlu memahami beberapa pengetahuan prasyarat:

kaedah window.print()

window.print() ialah kaedah yang disertakan dengan JavaScript dan digunakan terutamanya untuk melaksanakan fungsi pencetakan Selepas memanggil kaedah ini, penyemak imbas akan mula mencetak halaman semasa.

Gaya cetakan CSS

Dalam pratonton cetakan, gaya CSS juga merupakan bahagian yang sangat penting. Kami boleh mengawal reka letak, fon, warna, dsb. halaman bercetak melalui gaya CSS.

Saiz halaman cetak

Peranti yang berbeza mungkin mempunyai saiz kertas cetakan yang berbeza, jadi kita perlu melaraskan susun atur halaman yang dicetak mengikut saiz kertas cetakan peranti .

kaedah window.matchMedia()

window.matchMedia() ialah kaedah yang disertakan dengan JavaScript dan digunakan terutamanya untuk menentukan saiz paparan peranti semasa. Kita boleh menggunakan kaedah ini untuk melaraskan kesan paparan untuk peranti yang berbeza.

Langkah-langkah pelaksanaan

Dengan asas pra-pengetahuan, kita boleh mula memperkenalkan kaedah melaksanakan pratonton cetakan dalam javascript.

Buat butang cetak

Pertama, kita perlu mencipta butang cetak dalam halaman supaya pengguna boleh mengklik butang untuk mencetuskan fungsi pratonton cetakan. Kod butang adalah seperti berikut:

<button onclick="printPreview()">打印预览</button>

Salin selepas log masuk

Buat fungsi pratonton cetakan

Dalam butang cetak, kita perlu memanggil fungsi yang dipanggil printPreview() untuk melaksanakan fungsi pratonton cetakan. Kod fungsi adalah seperti berikut:

function printPreview(){
  //创建新的窗口
  var printWindow = window.open('', 'printWindow', 'height=600, width=800');

  //将样式表和HTML代码添加到新窗口中
  printWindow.document.write('<html><head>');
  printWindow.document.write('<link href="print.css" rel="stylesheet" type="text/css" media="print"/>');
  printWindow.document.write('</head><body>');
  printWindow.document.write(document.getElementById('printContent').innerHTML);//printContent为需要打印的内容区域的ID，需要在页面中定义
  printWindow.document.write('</body></html>');

  //设置新窗口的打印样式和相关属性
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
  printWindow.close();
}

Salin selepas log masuk

Dalam kod di atas, kami mula-mula mencipta tetingkap baharu bernama printWindow dan menambah helaian gaya dan kod HTML pada tetingkap. Harap maklum bahawa kami menggunakan helaian gaya CSS yang dipanggil print.css di sini, yang hanya akan berkuat kuasa apabila mencetak. Kemudian, kami menetapkan gaya cetakan dan sifat tetingkap baharu, dan muncul tetingkap pada skrin untuk pratonton cetakan. Akhirnya, kami menutup tetingkap apabila kami selesai mencetak.

Tetapkan gaya cetakan

Dalam fungsi pratonton cetakan, kami telah menambah helaian gaya CSS untuk mencetak. Berikut ialah kod contoh fail print.css, yang mengandungi beberapa gaya pencetakan yang biasa digunakan:

/*隐藏页面中的所有元素*/
* {
  display:none;
}

/*显示需要打印的区域*/
#printContent {
  display:block;
}

/*设置打印页面的字体和颜色*/
body {
  font-family:宋体, Arial;
  font-size:16px;
  color:#000;
}

/*为打印页面进行分页*/
.my-pagebreak{
  page-break-after: always;
}

/*设置打印页面的边距*/
@media print {
  @page {
    margin:20mm 15mm !important;
  }
}

Salin selepas log masuk

Di sini, kami menggunakan CSS untuk menyembunyikan semua elemen dalam halaman dan hanya memaparkan yang perlu kawasan bercetak. Pada masa yang sama, kami menetapkan fon dan warna halaman yang dicetak, dan menetapkan penomboran dan jidar untuk halaman tersebut.

Laraskan susun atur halaman

Saiz kertas cetakan peranti yang berbeza mungkin berbeza, jadi kita perlu melaraskan susun atur halaman yang dicetak mengikut saiz kertas cetakan peranti itu. Kita boleh menggunakan kaedah window.matchMedia() untuk menentukan saiz paparan peranti semasa dan melaraskan reka letak halaman bercetak dengan sewajarnya. Kodnya adalah seperti berikut:

function printPreview(){
  //创建新的窗口
  var printWindow = window.open('', 'printWindow', 'height=600, width=800');

  //根据设备的显示尺寸调整页面布局
  if (window.matchMedia('print and (max-width: 768px)').matches) {
    //设备宽度小于768px，调整页面布局
    //...
  } else if (window.matchMedia('print and (max-width: 992px)').matches) {
    //设备宽度小于992px，调整页面布局
    //...
  } else {
    //设备宽度大于等于992px，调整页面布局
    //...
  }

  //将样式表和HTML代码添加到新窗口中
  printWindow.document.write('<html><head>');
  printWindow.document.write('<link href="print.css" rel="stylesheet" type="text/css" media="print"/>');
  printWindow.document.write('</head><body>');
  printWindow.document.write(document.getElementById('printContent').innerHTML);//printContent为需要打印的内容区域的ID，需要在页面中定义
  printWindow.document.write('</body></html>');

  //设置新窗口的打印样式和相关属性
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
  printWindow.close();
}

Salin selepas log masuk

Dalam kod di atas, kami menggunakan kaedah window.matchMedia() untuk menentukan saiz paparan peranti semasa dan melaraskan reka letak halaman mengikut julat lebar yang berbeza. Mengikut keadaan sebenar, kita boleh melaraskan susun atur halaman bercetak sendiri.

Ringkasan

Pelaksanaan JavaScript pratonton cetakan boleh membolehkan kami mengawal kesan halaman bercetak dengan lebih tepat dan tepat, meningkatkan pengalaman pencetakan kami. Perlu diingat bahawa semasa proses pelaksanaan, kita perlu menyesuaikan gaya dan susun atur mengikut saiz peranti dan ciri penyemak imbas yang berbeza untuk memastikan konsistensi kesan percetakan. Pada masa yang sama, kami juga boleh menggunakan teknologi lain, seperti peraturan @page CSS3, untuk meningkatkan lagi kawalan kesan halaman percetakan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi pratonton cetakan dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!