Bagaimana untuk menetapkan saiz kertas halaman dalam javascript

JavaScript boleh membantu kami menetapkan satu siri sifat halaman web secara dinamik, termasuk saiz kertas. Ciri ini boleh digunakan untuk membina halaman percetakan adaptif yang memenuhi pelbagai keperluan keperluan percetakan pengguna. Dalam artikel ini, kami akan menunjukkan kepada anda cara menggunakan JavaScript untuk menetapkan saiz kertas halaman dan menggunakan helaian gaya untuk mengoptimumkan halaman untuk pencetakan.

1. Tetapkan saiz kertas halaman web

Terdapat dua kaedah utama untuk menetapkan saiz kertas halaman web: satu ialah menetapkan saiz kertas melalui helaian gaya CSS, dan yang lain ialah menetapkan saiz kertas secara dinamik melalui JavaScript .

1. Helaian gaya CSS untuk menetapkan saiz kertas

Anda boleh menetapkan saiz kertas halaman web melalui helaian gaya CSS. Dalam CSS, kita boleh menggunakan peraturan @page untuk mengawal sifat halaman yang dicetak. Di bawah ialah contoh yang menunjukkan cara menggunakan lembaran gaya CSS untuk menetapkan saiz kertas.

@page {
  size: A4 landscape;
}

Dalam kod di atas, kami menetapkan saiz kertas kepada landskap A4 (210mm × 297mm). Begitu juga, kami juga boleh menetapkannya kepada saiz lain, seperti potret A5, landskap huruf, dll. Cara menyediakan CSS ini sangat mudah, tetapi terdapat masalah: tidak semua penyemak imbas menyokong peraturan @page. Oleh itu, kita perlu mempertimbangkan isu keserasian penyemak imbas.

2. JavaScript untuk menetapkan saiz kertas secara dinamik

Jika kita perlu mempunyai kawalan yang lebih baik ke atas saiz kertas, kita boleh menggunakan JavaScript untuk menetapkan saiz kertas secara dinamik. JavaScript menyediakan kaedah print untuk mencetak tetingkap semasa atau dokumen yang ditentukan. Dalam kaedah print, kita boleh menggunakan atribut pageWidth dan pageHeight untuk mengawal saiz kertas. Di bawah ialah contoh mudah yang menunjukkan cara menetapkan saiz kertas secara dinamik menggunakan JavaScript.

function printPage() {
  var printPageWidth = 210;
  var printPageHeight = 297;

  // 创建一个新的打印窗口
  var printWindow = window.open('', '', 'width=794, height=1123');

  // 通过标准化处理来计算纸张大小
  printPageWidth = Math.floor(printPageWidth * 3.779527559) + 'px';
  printPageHeight = Math.floor(printPageHeight * 3.779527559) + 'px';

  // 设置纸张大小
  printWindow.document.body.style.width = printPageWidth;
  printWindow.document.body.style.height = printPageHeight;

  // 写入要打印的内容
  printWindow.document.write('<h1>Hello World!</h1>');

  // 关闭写入流，开始打印
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
  printWindow.close();
}

Dalam kod di atas, kami mula-mula menentukan lebar dan tinggi kertas. Kami kemudian menukar kedua-dua nilai ini kepada unit piksel berdasarkan proses normalisasi dan menetapkannya kepada elemen body tetingkap cetakan. Seterusnya, kami menulis beberapa kandungan untuk dicetak dalam tetingkap yang baru dibuka. Akhir sekali, kami memanggil kaedah print() untuk mencetuskan fungsi pencetakan dan menutup tetingkap selepas pencetakan selesai.

Perlu diambil perhatian bahawa kaedah ini memerlukan pencetusan pencetakan manual, dan ia tidak dapat mengelakkan isu keserasian penyemak imbas. Oleh itu, kita perlu mempertimbangkan ujian dan penyahpepijatan yang teliti sebelum digunakan.

2. Gunakan helaian gaya untuk mengoptimumkan halaman bercetak

Dalam proses merealisasikan halaman cetakan penyesuaian, helaian gaya memainkan peranan penting. Berikut ialah beberapa petua untuk menggunakan helaian gaya untuk mengoptimumkan halaman bercetak.

1. Tetapkan pengepala dan pengaki secara manual

Menggunakan helaian gaya untuk menetapkan pengepala dan pengaki tersuai boleh menjadikan halaman bercetak kami lebih profesional. Di bawah ialah contoh mudah yang menunjukkan cara menetapkan pengepala dan pengaki menggunakan helaian gaya CSS.

@media print {
  @page {
    size: A4 portrait;
    margin: 1cm;
    @top-center { content: "MY HEADER"; }
    @bottom-center { content: "MY FOOTER"; }
  }
}

Dalam kod di atas, kami menggunakan atribut @content untuk mentakrifkan pengepala dan pengaki tersuai. Dengan cara ini, kami boleh menambah logo, alamat, maklumat hubungan, dsb. kami sendiri pada halaman bercetak.

2. Sembunyikan elemen yang tidak perlu

Dalam halaman yang dicetak, beberapa elemen tidak perlu dicetak, seperti bar menu, sepanduk, iklan, dsb. Oleh itu, kita perlu menggunakan lembaran gaya untuk menyembunyikan elemen ini. Di bawah ialah contoh mudah yang menunjukkan cara menggunakan helaian gaya CSS untuk menyembunyikan elemen.

@media print {
  #menu, #banner, .ad {
    display: none !important;
  }
}

Dalam kod di atas, kami menggunakan atribut display untuk menyembunyikan elemen seperti bar menu, sepanduk dan iklan. Perlu diingatkan di sini bahawa memandangkan kami perlu memastikan bahawa elemen ini tidak akan dicetak, kami menggunakan kelas pseudo @media print dan kata kunci !important untuk memastikan peraturan gaya mempunyai keutamaan tertinggi.

3. Kesimpulan

Dalam artikel ini, kami memperkenalkan cara menggunakan JavaScript untuk menetapkan saiz kertas halaman web secara dinamik dan menggunakan helaian gaya CSS untuk mengoptimumkan halaman bercetak. Perlu diingatkan bahawa ujian dan penyahpepijatan yang mencukupi diperlukan apabila menggunakan teknik ini untuk memastikan keserasian merentas pelayar dan peranti yang berbeza. Jika kami boleh menggunakan teknik ini dengan betul, kami boleh membina halaman pencetakan adaptif yang sangat baik dan membawa pengalaman pencetakan yang lebih baik kepada pengguna.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan saiz kertas halaman dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!