如何实现点击按钮将HTML页面转换为PDF并自动下载

首先说死一个核心结论：不存在纯原生JS、不引入任何外部资源、不需要后端配合就能点击按钮直接自动下载PDF的方案。
浏览器有明确的安全策略限制，你用的window.print()已经是纯原生API能做到的极限——这个API设计上就必须唤起打印选择弹窗，没有任何隐藏参数可以跳过用户手动选择"保存为PDF"的步骤，所有声称能纯原生绕过这个弹窗的方法都是假的。

如果你的需求是点击按钮直接触发PDF下载，不需要手动操作打印弹窗，有两个轻量方案可选，都不需要装本地插件：

• 纯前端轻量库方案：引入html2pdf.js，这个库是零依赖的单文件脚本，压缩后体积不到100KB，不需要后端支持，引入后几行代码就能实现自动下载。
  示例代码如下：

  <!-- 引入单文件脚本，没有其他依赖 -->
  <script src="html2pdf.bundle.min.js"></script>
  <button onclick="handleDownload()">Download</button>
  <script>
  function handleDownload() {
    const exportElement = document.documentElement; // 导出整个页面
    html2pdf()
      .set({
        filename: '页面导出.pdf',
        margin: 8,
        html2canvas: { scale: 2, useCORS: true },
        jsPDF: { format: 'a4', orientation: 'portrait' }
      })
      .from(exportElement)
      .save(); // 自动触发下载，不需要额外操作
  }
  </script>
  

  点击按钮后脚本会自动在前端完成页面截图、排版、PDF生成，直接触发浏览器下载行为，完全不会弹出打印预览窗口。
• 无前端依赖方案：走后端接口实现。前端把当前页面的HTML内容通过POST请求发送给后端，后端用Puppeteer这类无头浏览器工具渲染页面生成PDF，把PDF文件流返回给前端，前端收到流之后触发文件下载。这个方案不需要前端引入任何第三方脚本，但需要后端配合开发对应接口，导出的PDF排版精度也更高。

补充说明：如果你的项目要求完全不能引入任何外部JS、也没有后端支持，那只能接受window.print()需要手动点保存的交互，没有其他绕过方式，这是浏览器的安全机制决定的，不存在奇技淫巧可以突破。

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