How to control the top and end of pages in browser printing settings through JavaScript or CSS?

Can JavaScript and CSS control the header and footer of the browser's printing settings?

Many developers want to use JavaScript or CSS to control header footer settings in browser printing dialogs, such as unchecking by default or customizing header footer content. However, this is not an easy task, and this article will explore its feasibility and limitations in depth.

Problem Overview

The goal is to control the header and footer options in the browser printing settings through code. The specific requirements are:

1. Header footer is disabled by default: Header footer is not displayed by default when printing.
2. Custom header footer with @media print : Custom header footer content with @media print style rules, but this method does not work when using the printJS plugin.

The code snippets provided by the user are as follows:

 html2canvas(this.$refs.templateToImg, {
  backgroundColor: null,
  useCORS: true,
  windowHeight: document.body.scrollHeight,
}).then(canvas => {
  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: 'top content';}@bottom-center {content: 'footer content';}}}"
  printJS({
    printable: url,
    type: 'image',
    documentTitle: this.previewTitle(),
    style: styles,
    onLoadingEnd: () => {
      this.printLoading = false
      dom.style.height = 'auto'
      dom.style.overflow = 'visible'
    }
  })
})

Solutions and limitations

The key is to understand the following points:

1. Uncontrollability of browser printing settings: The browser printing settings (including headers and footers) are controlled by the browser itself or the operating system, and JavaScript and CSS cannot directly interfere.
2. Limitations of @media print : @media print can control the printing style, but cannot directly modify the browser's printing settings. printJS plugin may ignore styles set through @media print .
3. Features of printJS plug-in: printJS is mainly used to print HTML content or pictures, and does not support directly modifying browser printing settings. In the code, I tried passing the @media print style through style parameter, but it didn't work well in printJS .

Therefore, the conclusion is: JavaScript and CSS cannot directly control the header and footer options for the browser's printing settings. This falls within the scope of permissions of the browser and operating system.

To customize headers and footers, you can only add these elements directly to the print content and make sure they are visible when printed and are not affected by the print plugin. Developers need to give up the idea of ​​directly controlling browser print settings and instead focus on implementing headers and footers in the print content itself.

The above is the detailed content of How to control the top and end of pages in browser printing settings through JavaScript or CSS?. For more information, please follow other related articles on the PHP Chinese website!