pengubahsuaian javascript sebelum dicetak

JavaScript ialah bahasa skrip yang digunakan secara meluas dalam aplikasi web. Dalam proses pembangunan web, fungsi pencetakan adalah penting, tetapi hanya menggunakan fungsi pencetakan penyemak imbas boleh membawa kepada hasil yang tidak memuaskan. Oleh itu, artikel ini akan memperkenalkan cara mengubah suai gaya dan kandungan halaman bercetak dalam JavaScript untuk mencapai kesan cetakan yang lebih baik.

1. Ubah suai gaya

1 Gunakan pertanyaan media @media

@pertanyaan media merujuk kepada penggunaan peraturan @media dalam helaian gaya untuk membuat helaian gaya sahaja. untuk peranti jenis Media tertentu berkuat kuasa. Sebelum mencetak, kita boleh menggunakan peraturan @media untuk mengubah suai gaya halaman yang dicetak supaya halaman yang dicetak lebih sesuai.

Kod sampel adalah seperti berikut:

@media print {
  /* 在这里定义修改的样式 */
}

Dalam kod di atas, @media print menunjukkan bahawa kita ingin mengubah suai jenis media yang digunakan oleh pencetak, di mana kita boleh menambah pelbagai gaya, seperti sebagai menetapkan warna latar belakang:

@media print {
  body {
    background-color: #fff;
  }
}

Dalam contoh ini, kami menetapkan warna latar belakang halaman yang dicetak kepada putih.

Dalam peraturan @media, kita juga boleh menambah gaya lain, seperti menetapkan saiz halaman dan orientasi:

@media print {
  @page {
    size: A4 portrait; /* 竖向A4页面 */
  }
}

Dalam kod di atas, peraturan @page digunakan untuk menetapkan halaman saiz dan orientasi, Atribut saiz digunakan untuk menetapkan saiz halaman, dan potret menunjukkan bahawa orientasi halaman adalah menegak.

2. Gunakan helaian gaya cetakan

Helaian gaya cetakan merujuk kepada helaian gaya khas yang mengandungi gaya yang disediakan khas untuk cetakan. Kita boleh menggunakan ini untuk mengubah suai gaya halaman yang dicetak sebelum mencetak.

Kod sampel adalah seperti berikut:

<link rel="stylesheet" href="print.css" media="print" />

Dalam kod di atas, kami memperkenalkan helaian gaya bernama print.css dalam fail HTML dan menetapkan atribut media helaian gaya untuk mencetak .

Dalam helaian gaya print.css, kami boleh menambah gaya yang disediakan khas untuk cetakan, contohnya:

body {
  font-size: 12pt;
  line-height: 1.5;
}

Dalam kod di atas, kami menetapkan saiz fon halaman yang dicetak kepada 12pt, Ketinggian baris ditetapkan kepada 1.5.

Menggunakan helaian gaya cetakan boleh menjadikan pengubahsuaian gaya lebih fleksibel tanpa menjejaskan gaya asal.

2. Ubah suai kandungan

1. Sembunyikan elemen yang tidak diperlukan

Dalam halaman bercetak, kami biasanya tidak perlu memaparkan beberapa elemen, seperti menu, iklan, dsb. Unsur-unsur ini Ia akan membazir kertas dan menjejaskan kesan percetakan. Oleh itu, kita boleh menggunakan JavaScript untuk menyembunyikan elemen ini sebelum mencetak.

Kod sampel adalah seperti berikut:

window.onload = function() {
  var printBtn = document.getElementById('printBtn');
  printBtn.onclick = function() {
    // 隐藏不必要的元素
    document.getElementById('menu').style.display = 'none';
    document.getElementById('ad').style.display = 'none';
    
    // 执行打印操作
    window.print();
    
    // 恢复元素的显示
    document.getElementById('menu').style.display = 'block';
    document.getElementById('ad').style.display = 'block';
  }
}

Dalam kod di atas, kami mula-mula mendapatkan butang dengan id printBtn dan mengikat acara klik padanya. Dalam pengendali acara, kami menyembunyikan dua elemen dengan menu id dan iklan dengan menetapkan atribut paparannya kepada 'tiada' melalui JavaScript. Seterusnya, kami melakukan operasi cetakan, dan kemudian menetapkan atribut paparan unsur-unsur ini untuk 'sekat' selepas mencetak, dengan itu memulihkan paparannya.

Perlu diperhatikan bahawa menyembunyikan elemen sebelum mencetak boleh menjadikan kesan cetakan lebih bersih, tetapi apabila melaksanakan fungsi, anda mesti memberi perhatian bahawa elemen tersembunyi tidak akan menjejaskan fungsi lain halaman.

2. Tambahkan pengepala dan pengaki cetakan

Pengepala dan pengaki cetakan biasanya mengandungi beberapa maklumat penting, seperti masa pencetakan, nama fail, dsb. Kami boleh menggunakan JavaScript untuk menambah pengepala dan pengaki cetakan sebelum mencetak.

Kod sampel adalah seperti berikut:

window.onload = function() {
  var printBtn = document.getElementById('printBtn');
  printBtn.onclick = function() {
    // 添加打印页眉
    var header = '<div style="text-align:center;font-size:14pt;">打印页眉</div>';
    document.body.insertAdjacentHTML('beforebegin', header);
    
    // 添加打印页脚
    var footer = '<div style="text-align:center;font-size:12pt;">打印页脚</div>';
    document.body.insertAdjacentHTML('afterend', footer);
    
    // 执行打印操作
    window.print();
    
    // 删除打印页眉和页脚
    document.body.previousSibling.remove();
    document.body.nextSibling.remove();
  }
}

Dalam kod di atas, kami mula-mula mendapatkan butang dengan id printBtn dan mengikat acara klik padanya. Dalam pengendali acara, kami menambah pengepala dan pengaki cetakan secara berasingan melalui JavaScript. Antaranya, kaedah insertAdjacentHTML() digunakan untuk memasukkan kod HTML pada lokasi tertentu dalam dokumen beforebegin bermaksud memasukkan sebelum elemen semasa, dan afterend bermaksud memasukkan selepas elemen semasa. Kami telah menggunakan beforebegin dan afterend masing-masing di sini untuk menambah pengepala dan pengaki ke tempat yang betul.

Seterusnya, kami melakukan operasi pencetakan, dan kemudian selepas pencetakan selesai, kami memadamkan pengepala dan pengaki percetakan daripada dokumen melalui JavaScript untuk mengelak daripada menjejaskan fungsi lain.

Ringkasan

Mengubah suai gaya dan kandungan halaman bercetak melalui JavaScript boleh menjadikan kesan cetakan lebih ideal dan meningkatkan pengalaman pengguna. Apabila melaksanakan fungsi, kita perlu memberi perhatian kepada keserasian dan kebolehgunaan halaman dan mengelakkan masalah yang tidak perlu sebanyak mungkin.

Atas ialah kandungan terperinci pengubahsuaian javascript sebelum dicetak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!