如何用HTML实现PDF打印预览？

在网页开发中，实现HTML内容的PDF打印预览是常见需求，尤其适用于报表、合同、账单等需要纸质或电子存档的场景，以下是四种主流方法,每种都附详细步骤和代码示例：

浏览器原生打印（快速简单）

原理：调用浏览器的打印功能，用户选择“另存为PDF”即可生成PDF文件。
步骤：

1. HTML结构用语义化标签（如<article>、<section>）组织。
2. CSS优化：通过@media print定制打印样式：

   @media print {
     /* 隐藏非必要元素 */
     .no-print { display: none; }
     /* 调整字体和边距 */
     body { font-size: 12pt; margin: 0; }
     /* 避免分页截断表格 */
     table { page-break-inside: avoid; }
   }

3. JavaScript触发打印：

   document.getElementById('printBtn').addEventListener('click', () => {
     window.print(); // 打开浏览器打印预览
   });

   优点：零依赖、跨浏览器支持。
   缺点：样式需手动适配，无法深度控制PDF属性（如页眉页脚）。

前端库生成PDF（动态灵活）

推荐库：jsPDF + html2canvas（将HTML转图像嵌入PDF）。
步骤：

1. 安装依赖：

   

   npm install jspdf html2canvas

2. 生成PDF并预览：

   import { jsPDF } from 'jspdf';
   import html2canvas from 'html2canvas';
   async function generatePDF() {
     const element = document.getElementById('content');
     const canvas = await html2canvas(element, { scale: 2 }); // 高清渲染
     const imgData = canvas.toDataURL('image/png');
     const pdf = new jsPDF('p', 'mm', 'a4');
     const pageWidth = pdf.internal.pageSize.getWidth();
     const pageHeight = pdf.internal.pageSize.getHeight();
     const imgRatio = canvas.width / canvas.height;
     const imgHeight = pageWidth / imgRatio;
     pdf.addImage(imgData, 'PNG', 0, 0, pageWidth, imgHeight);
     pdf.output('dataurlnewwindow'); // 在新窗口预览
   }

   优点：完全前端实现，可自定义PDF尺寸、方向。
   缺点可能性能差，文本无法复制（因转为图片）。

CSS打印样式进阶控制

针对原生打印的深度优化：

• 分页控制：

  @media print {
    .page-break { 
      page-break-before: always; /* 元素前分页 */
      margin-top: 20px;
    }
  }

• 去除默认页眉页脚：

  @page { margin: 0; } /* 需浏览器支持 */

• 打印链接URL：

  a::after { content: " (" attr(href) ")"; }

服务端生成PDF（企业级方案）

推荐工具：

• Node.js: puppeteer（无头浏览器）
• PHP: TCPDF / DOMPDF

Puppeteer示例：

const puppeteer = require('puppeteer');
async function generatePDF(url, outputPath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle0' });
  await page.pdf({
    path: outputPath,
    format: 'A4',
    printBackground: true // 包含背景色/图
  });
  await browser.close();
}
generatePDF('https://example.com', 'output.pdf');

优点：精准控制、支持复杂布局、文本可复制。
缺点：需服务器环境,部署成本高。

方法对比与选型建议

关键注意事项

1. 字体嵌入：
   使用@font-face引入字体,并确认字体许可证允许嵌入PDF。
2. 图片处理：
   使用绝对路径（避免相对路径404），压缩图片（减少PDF体积）。
3. 浏览器兼容性：
   • 测试Chrome/Firefox/Safari的打印效果。
   • 部分CSS属性（如position: fixed）打印时失效。
4. 安全与版权：
   • 避免前端生成（防止数据泄露）。
   • 商用项目优先选择成熟开源库（如jsPDF/MIT协议）。

权威参考

• MDN打印指南：MDN @media print
• Google打印最佳实践：Web Fundamentals – Print
• jsPDF文档：jsPDF Official Docs
• Puppeteer API：Puppeteer Documentation

根据需求复杂度选择方案：轻量级选原生打印或jsPDF，企业级选服务端生成，始终在真实设备测试输出效果,并优先遵循W3C打印标准。