如何使用JavaScript或API将带CSS的HTML页面可靠转换为PDF

方案1：使用html2pdf.js（纯前端轻量方案） #

这个库在jsPDF的基础上封装了html2canvas做DOM渲染，比直接用jsPDF的CSS适配能力好很多，默认会自动忽略display: none的元素，符合你的需求。

• 基础使用步骤：
  1. 引入库，npm安装的话执行npm install html2pdf.js，也可以直接引入CDN资源
  2. 按钮点击触发的逻辑参考：

  document.querySelector('#downloadPdfBtn').addEventListener('click', () => {
    const opt = {
      margin: 10,
      filename: '页面导出.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2, useCORS: true }, // 解决跨域图片渲染问题，scale越大清晰度越高
      jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
    };
    // 直接传入需要导出的DOM节点，默认不会渲染display:none的内容
    html2pdf().set(opt).from(document.body).save();
  })
  

• 注意事项：如果有复杂的CSS3属性（比如渐变、动画、固定定位）可能还是会有适配问题，可以提前给要导出的节点加专属类，调整导出时的样式。

方案2：调用浏览器原生Print API（样式还原度最高） #

这个方案用浏览器自带的打印能力渲染，CSS适配100%和页面一致，完全遵循CSS的display: none规则，不会渲染隐藏元素，不需要引入第三方库，兼容性也很好。

• 实现逻辑：
  1. 编写打印专用的媒体查询样式，控制导出PDF的排版：

  @media print {
    /* 隐藏不需要导出的元素，比如下载按钮本身 */
    #downloadPdfBtn, .other-unnecessary-elements {
      display: none !important;
    }
    /* 调整PDF页面边距 */
    @page {
      margin: 1cm;
    }
    /* 避免内容被分页截断 */
    div, section {
      break-inside: avoid;
    }
  }
  

  2. 按钮触发打印导出逻辑：

  document.querySelector('#downloadPdfBtn').addEventListener('click', () => {
    window.print();
  })
  

• 额外优化：如果不想让用户看到打印预览弹窗，需要静默下载的话，可以在Chrome等浏览器的配置里开启静默打印权限，普通场景下默认调用会弹出预览框，用户手动选择「保存为PDF」即可下载。

方案3：服务端辅助方案（复杂页面首选） #

如果页面内容非常复杂，有大量动态渲染内容、特殊字体、跨域资源，前端方案适配成本高，可以把页面URL传给后端，用Puppeteer无头浏览器渲染页面后生成PDF返回给前端下载，生成效果和浏览器直接打开完全一致，也会自动忽略display: none的元素。

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