如何用JavaScript在Safari中程序化移除打印页的页眉页脚？

先说明白：JavaScript没法直接修改Safari的打印设置（包括页眉页脚），这是浏览器的安全权限限制，所有现代浏览器都有这规矩。但可以通过CSS打印样式绕过去，让页眉页脚被内容覆盖或者直接“挤没”，下面是具体操作：

1. 用CSS @page 规则调整边距 #

Safari的默认页眉页脚是渲染在页面边距区域的，把页面边距设为0，再给打印内容加内边距预留空间，就能让内容占满原本页眉页脚的位置：

@media print {
  @page {
    margin: 0;
  }
  body {
    margin: 1.5cm; /* 给内容留边距，别贴着纸边打印 */
  }
}

这是最通用的方法，大部分场景都能解决问题——页眉页脚会被0边距挤掉，内容的内边距又保证了打印效果正常。

2. 锁定打印区域+隐藏无关元素 #

如果页面有不需要打印的部分，比如导航栏、侧边栏，可以配合display: none和固定定位来指定打印内容：

@media print {
  /* 隐藏所有不需要打印的元素 */
  header, footer, .non-print {
    display: none !important;
  }
  /* 让打印容器占满整个打印页面 */
  .print-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 1cm; /* 根据需求调整边距 */
  }
  @page {
    margin: 0;
  }
}

把要打印的内容放到.print-wrap容器里，打印时就只会渲染这个容器的内容，默认页眉页脚自然就没了。

3. 适配Safari的特殊坑 #

• 有时候Safari会无视@page的margin设置，这时候可以加个size属性试试，比如指定纸张尺寸：

@media print {
  @page {
    size: A4;
    margin: 0;
  }
}

• 如果是iOS上的Safari，要注意viewport设置，避免打印时页面缩放异常，在HTML头部加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

备选方案：生成PDF再打印 #

要是上面的CSS方法都不管用，可以考虑前端生成PDF（比如用jsPDF库），让用户打印PDF就行。PDF能完全控制内容，不会有浏览器默认的页眉页脚。示例代码：

// 假设要打印的内容在#print-target元素里
const printContent = document.getElementById('print-target');
const pdfDoc = new jsPDF();

pdfDoc.html(printContent, {
  callback: function(pdf) {
    // 可以直接触发打印，或者让用户保存后打印
    pdf.autoPrint();
  },
  x: 10,
  y: 10,
  width: 190 // 对应A4纸宽度，单位mm
});

这种方法完全绕开了浏览器打印设置，缺点是要引入第三方库，用户需要处理PDF文件。

总结：优先用CSS方案，轻量又直接；要是Safari兼容性有问题，再考虑生成PDF的路子。

内容的提问来源于stack exchange，提问作者zy zhang