如何让Firefox打印HTML为带文档内部链接的PDF？

问题说明 #

打开以下HTML文档并打印时，Firefox与Chromium的链接表现不一致：

• Chromium生成的PDF中，#target1、#target2这类锚点是文档内部链接，点击可跳转至PDF内对应位置，符合需求。
• Firefox生成的PDF中，锚点会被转为指向当前站点的外部绝对链接，手动打印或调用window.print()结果一致，无法实现内部跳转。

示例HTML代码 #

<html>
<body>
<a href="#target1">To target 1</a>
<a href="#target2">To target 2</a>
<div style="height:100vh;background-color:green">Some space</div>
<div id="target1">This is target 1<div>
<div style="height:100vh;background-color:yellow">Some more space</div>
<div id="target2">This is target 2</div>
</body>
</html>

解决方法 #

方法1：网页层面的通用解决方案（推荐） #

通过JavaScript在打印前临时修正链接格式，打印后恢复原始状态，确保Firefox识别为内部锚点：

<script>
// 打印前处理链接
window.addEventListener('beforeprint', () => {
  document.querySelectorAll('a[href^="#"]').forEach(link => {
    link.dataset.originalHref = link.href;
    link.href = link.getAttribute('href');
  });
});

// 打印后恢复原始链接
window.addEventListener('afterprint', () => {
  document.querySelectorAll('a[href^="#"]').forEach(link => {
    if (link.dataset.originalHref) {
      link.href = link.dataset.originalHref;
      delete link.dataset.originalHref;
    }
  });
});
</script>

原理：Firefox打印时会将完整的绝对URL转为外部链接，而直接使用纯锚点格式（#target1）时，会被识别为PDF内部链接。

方法2：本地Firefox设置调整（仅个人用户适用） #

如果是个人使用Firefox打印，可手动修改打印设置：

• 按Ctrl+P打开打印预览，点击右上角更多设置
• 找到链接相关选项，选择保留文档内部链接（不同版本表述可能略有差异）
• 生成PDF即可保留内部锚点跳转功能

注意：此方法仅能由用户手动操作，无法通过网页代码控制，适合个人场景。

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