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

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

聖光之護

发布： 2025-03-19 11:08:11

原创

1148人浏览过

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

浏览器打印设置：JavaScript和CSS的局限性

本文探讨如何使用JavaScript或CSS控制浏览器打印时的页眉和页脚默认勾选。许多开发者在打印页面时，会遇到浏览器默认勾选页眉页脚的问题。然而，直接通过代码取消这些默认勾选并非易事。

问题背景：用户希望在打印时，默认不勾选浏览器设置中的页眉页脚选项。用户尝试使用@media print自定义页眉页脚，但在使用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设置页眉页脚内容，但效果不佳。

立即学习“Java免费学习笔记（深入）”；