如何通过JavaScript或CSS取消浏览器打印设置中的页首及页尾默认勾选？-css教程-PHP中文网

如何通过JavaScript或CSS取消浏览器打印设置中的页首及页尾默认勾选？

聖光之護

发布： 2025-03-20 08:54:20

原创

462人浏览过

如何通过javascript或css取消浏览器打印设置中的页首及页尾默认勾选？

浏览器打印设置：无法通过代码取消页眉页脚默认勾选

网页打印功能常常需要精细控制页眉页脚。本文探讨如何通过JavaScript或CSS取消浏览器打印设置中页眉页脚的默认勾选。近期，有用户反馈，使用JavaScript和printJS插件时，无法通过代码取消默认勾选，且@media print样式失效。

用户代码片段如下，使用html2canvas和printJS打印图片：

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: '页首内容';}@bottom-center {content: '页脚内容';}}}" // 无效
  printJS({
    printable: url,
    type: 'image',
    documentTitle: this.previewTitle(),
    style: styles,
    onLoadingEnd: () => {
      this.printLoading = false
      dom.style.height = 'auto'
      dom.style.overflow = 'visible'
    }
  })
})

登录后复制

经分析，浏览器打印设置属于系统级功能，用户在打印对话框中手动控制。虽然@media print可自定义打印样式，但无法直接影响浏览器打印设置的默认勾选状态。 printJS插件的打印机制与标准浏览器打印机制不同，导致@media print样式失效。