Bagaimana untuk mengawal bahagian atas dan akhir halaman dalam tetapan percetakan penyemak imbas melalui JavaScript atau CSS?

Bolehkah JavaScript dan CSS mengawal header dan footer tetapan percetakan penyemak imbas?

Ramai pemaju ingin menggunakan JavaScript atau CSS untuk mengawal tetapan footer header dalam dialog percetakan penyemak imbas, seperti Unchecking secara lalai atau menyesuaikan kandungan footer header. Walau bagaimanapun, ini bukan tugas yang mudah, dan artikel ini akan meneroka kemungkinan dan batasannya secara mendalam.

Gambaran Keseluruhan Masalah

Matlamatnya adalah untuk mengawal pilihan tajuk dan footer dalam tetapan percetakan penyemak imbas melalui kod. Keperluan khusus adalah:

1. Footer header dilumpuhkan secara lalai: Footer header tidak dipaparkan secara lalai apabila mencetak.
2. Footer Header Custom dengan @media print : Kandungan Footer Header Custom dengan Peraturan Gaya @media print , tetapi kaedah ini tidak berfungsi apabila menggunakan plugin printJS .

Coretan kod yang disediakan oleh pengguna adalah seperti berikut:

 html2canvas (ini. $ refs.templateToimg, {
  Latar Belakang Color: Null,
  usecors: benar,
  WindowHeight: document.body.scrollHeight,
}). Kemudian (kanvas => {
  dom.style.height = 'calc (100vh - 400px)'
  dom.style.overflow = 'auto'
  const url = canvas.todataurl ('image/jpg')
  this.img = url
  const styles = "@media print {@page {Height: 100%;@top-left {content: 'content top';}@bawah-pusat {content: 'footer content';}}}"
  printjs ({
    boleh dicetak: url,
    Jenis: 'Imej',
    DocumentTitle: this.previewTitle (),
    Gaya: Gaya,
    onloadingend: () => {
      this.printloading = false
      dom.style.height = 'auto'
      dom.style.overflow = 'Looks'
    }
  })
})

Penyelesaian dan batasan

Kuncinya adalah memahami perkara berikut:

1. Ketidakhadiran tetapan percetakan penyemak imbas: Tetapan percetakan penyemak imbas (termasuk tajuk dan footer) dikawal oleh penyemak imbas itu sendiri atau sistem pengendalian, dan JavaScript dan CSS tidak dapat campur tangan secara langsung.
2. Batasan @media print : @media print dapat mengawal gaya percetakan, tetapi tidak dapat mengubah suai tetapan percetakan penyemak imbas secara langsung. Plugin printJS boleh mengabaikan gaya yang ditetapkan melalui @media print .
3. Ciri-ciri Plug-In printJS : printJS digunakan terutamanya untuk mencetak kandungan atau gambar HTML, dan tidak menyokong secara langsung mengubah suai tetapan percetakan penyemak imbas. Dalam kod itu, saya cuba lulus gaya @media print melalui parameter style , tetapi ia tidak berfungsi dengan baik dalam printJS .

Oleh itu, kesimpulannya ialah: JavaScript dan CSS tidak dapat secara langsung mengawal pilihan tajuk dan footer untuk tetapan percetakan penyemak imbas. Ini berada dalam skop keizinan sistem pelayar dan operasi.

Untuk menyesuaikan tajuk dan kaki, anda hanya boleh menambah unsur -unsur ini terus ke kandungan cetak dan pastikan ia kelihatan apabila dicetak dan tidak dipengaruhi oleh plugin cetak. Pemaju perlu menyerahkan idea untuk mengawal tetapan cetakan pelayar langsung dan sebaliknya memberi tumpuan kepada pelaksanaan tajuk dan footer dalam kandungan cetak itu sendiri.

Atas ialah kandungan terperinci Bagaimana untuk mengawal bahagian atas dan akhir halaman dalam tetapan percetakan penyemak imbas melalui JavaScript atau CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!