前端生成发票 PDF：纯 JS 方案完整教程

业务系统里最常见的需求之一就是开发票、导出 PDF。传统做法要搭 Java/PHP 后端渲染，或者部署无头浏览器——重、慢、贵。今天分享一个纯前端方案：用 dompdf.js 直接在浏览器里生成发票 PDF，零后端依赖，实测千页文档 2 秒内完成。

为什么前端直接生成？

发票场景的痛点：内容动态（客户信息、金额、商品明细）、格式固定（表头、边框、分页）、还经常要批量导出。

纯前端方案的优势：不占用服务器资源、无需等待后端渲染队列、PDF 即时生成即时下载，支持离线使用。

dompdf.js 采用 Rust+WASM 内核，直接在浏览器解析 DOM 生成矢量 PDF，文字可搜索、缩放不模糊。

代码示例

import { DomPDF } from 'dompdf.js';

const invoiceHTML = `
  <h1 style="text-align:center">增值税电子发票</h1>
  <table style="width:100%;border-collapse:collapse">
    <tr><th style="border:1px solid #000;padding:8px">商品名称</th>
        <th style="border:1px solid #000;padding:8px">金额</th></tr>
    <tr><td style="border:1px solid #000;padding:8px">开发服务</td>
        <td style="border:1px solid #000;padding:8px">¥ 8,800.00</td></tr>
  </table>`;

const pdf = new DomPDF();
pdf.addPage(invoiceHTML, { format: 'A4' });
pdf.save('invoice.pdf');

关键能力

表格与边框：完整支持 table/border 渲染，发票表格样式精准还原。

自动分页：商品明细超过一页时自动分页，页眉页脚自动重复。

中文字体：内置思源黑体，无需额外配置字体。

批量导出：循环 addPage 即可生成多页发票簿。

常见问题

Q: 生成的 PDF 文字能选中吗？A: 可以，dompdf.js 输出的是矢量文本而非图片，文字可搜索、可复制。

Q: 需要服务器吗？A: 完全不需要，纯浏览器端运行。

Q: 支持 Vue/React 吗？A: 支持，任何前端框架都能直接调用。