如何生成与window.print()效果一致的适配@media print的PDF？

嘿，这个需求我太有共鸣了——手动点开浏览器打印菜单再选保存PDF，确实不够省心！咱们可以用简单的原生JS实现一个按钮，一键触发和手动打印预览完全一致的流程，而且能完美复用你已经写好的@media print样式。

核心实现思路 #

浏览器的window.print()方法本质上就是触发原生打印流程，和用户按Ctrl+P/Command+P是完全一样的，它会自动切换到打印媒体查询模式，加载你的@media print样式，渲染出和预览一致的内容。咱们要做的就是给按钮绑定这个方法，再做些细节优化。

步骤1：添加触发按钮 #

先在页面里加一个显眼的按钮，比如放在页面顶部或者操作栏：

<button id="printToPdfBtn">下载PDF（打印版）</button>

步骤2：绑定打印触发逻辑 #

用JS给按钮添加点击事件，直接调用window.print()：

const pdfBtn = document.getElementById('printToPdfBtn');
pdfBtn.addEventListener('click', () => {
  // 触发浏览器原生打印流程
  window.print();
});

步骤3：优化打印体验（可选） #

你肯定不希望这个下载按钮出现在最终的PDF里对吧？有两种优雅的方式处理：

1. 用打印媒体查询隐藏按钮（推荐）
   直接在你的打印CSS里加一行：

@media print {
  #printToPdfBtn {
    display: none !important;
  }
  /* 其他已有的打印样式 */
}

这样浏览器在渲染打印内容时会自动隐藏按钮，完全不影响页面正常显示。

2. 临时隐藏再恢复
   如果需要更灵活的控制（比如打印前隐藏某些其他元素），可以在JS里临时修改样式，打印完成后恢复：

pdfBtn.addEventListener('click', () => {
  // 临时隐藏按钮
  pdfBtn.style.display = 'none';
  // 触发打印
  window.print();
  // 不管用户是打印还是取消，100ms后恢复按钮显示
  setTimeout(() => {
    pdfBtn.style.display = 'block';
  }, 100);
});

关键说明 #

• 为什么这个方法能保证和手动预览效果一致？因为它用的就是浏览器原生的打印渲染引擎，和你手动操作打印预览的流程完全相同，所有@media print的样式都会被精准应用。
• 能不能跳过预览直接下载？不行哦——浏览器出于安全和用户控制权的考虑，不允许JS直接触发无确认的PDF下载，必须让用户在预览窗口确认保存参数（比如纸张大小、边距、保存路径），但这个按钮已经把操作步骤从“找菜单→点打印→选保存”简化成了“点一下按钮→选保存”，足够便捷了。
• 兼容性：这个方案在Chrome、Safari、Firefox都能完美工作，和你之前测试的手动打印效果完全一致。

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