前端PDF发票生成与展示全攻略：从技术到实践

在数字化时代，电子发票已成为企业财务管理的标配。前端开发者如何高效、安全地生成并展示PDF格式的发票？本文将从技术选型、核心实现、性能优化到安全合规，提供一套完整的解决方案。

一、技术选型：前端生成PDF的核心工具

1.1 PDF.js：浏览器端的PDF渲染引擎

PDF.js是Mozilla推出的开源库，可直接在浏览器中解析和渲染PDF文件，无需依赖后端服务。其核心优势在于：

• 纯前端实现：基于JavaScript，无需服务器支持。
• 高兼容性：支持所有现代浏览器。
• 交互功能：支持缩放、搜索、文本选择等。

适用场景：需要直接在浏览器中展示PDF发票，且对交互性要求较高的场景。

代码示例：

// 加载PDF文件
const loadingTask = pdfjsLib.getDocument('invoice.pdf');
loadingTask.promise.then(function(pdf) {
  // 获取第一页
  return pdf.getPage(1);
}).then(function(page) {
  const viewport = page.getViewport({ scale: 1.0 });
  const canvas = document.getElementById('pdf-canvas');
  const context = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;
  const renderContext = {
    canvasContext: context,
    viewport: viewport
  };
  page.render(renderContext);
});

1.2 jsPDF：轻量级PDF生成库

jsPDF是一个轻量级的JavaScript库，用于在前端生成PDF文件。其特点包括：

• 简单易用：API设计直观，适合快速生成简单PDF。
• 支持文本、图像、图表：可添加文本、图片、线条等基本元素。
• 插件扩展：支持通过插件添加更复杂的功能（如表格、图表）。

适用场景：需要动态生成PDF发票，且对布局复杂度要求不高的场景。

代码示例：

const doc = new jsPDF();
doc.text('发票编号：INV20230001', 10, 10);
doc.text('客户名称：某某公司', 10, 20);
doc.text('金额：¥1,000.00', 10, 30);
doc.save('invoice.pdf');

1.3 PDF-Lib：功能强大的PDF操作库

PDF-Lib是一个功能强大的PDF操作库，支持生成、修改和提取PDF内容。其核心优势在于：

• 全面支持PDF操作：可创建、修改、合并、拆分PDF。
• 高性能：基于WebAssembly，处理大文件效率高。
• 类型安全：提供TypeScript支持。

适用场景：需要高度定制化PDF发票（如动态表格、复杂布局）的场景。

代码示例：

import { PDFDocument, rgb } from 'pdf-lib';
async function createInvoice() {
  const pdfDoc = await PDFDocument.create();
  const page = pdfDoc.addPage([595.28, 841.89]); // A4尺寸
  const { width, height } = page.getSize();
  const fontSize = 24;
  page.drawText('发票', {
    x: 50,
    y: height - 40,
    size: fontSize,
    color: rgb(0.95, 0.1, 0.1),
  });
  const pdfBytes = await pdfDoc.save();
  // 可通过Blob或File API下载
}

二、核心实现：从数据到PDF的全流程

2.1 数据准备与格式化

生成PDF发票前，需准备结构化数据（如JSON）。关键字段包括：

• 发票编号、日期
• 客户信息（名称、地址、税号）
• 商品明细（名称、数量、单价、金额）
• 总金额、税额、应付金额

数据格式示例：

{
  "invoiceNumber": "INV20230001",
  "date": "2023-10-01",
  "customer": {
    "name": "某某公司",
    "address": "北京市朝阳区",
    "taxId": "1234567890"
  },
  "items": [
    {
      "name": "服务费",
      "quantity": 1,
      "unitPrice": 1000,
      "amount": 1000
    }
  ],
  "total": 1000,
  "tax": 0,
  "amountDue": 1000
}

2.2 动态生成PDF

结合数据与PDF库，动态生成发票内容。以PDF-Lib为例：

async function generateInvoice(data) {
  const pdfDoc = await PDFDocument.create();
  const page = pdfDoc.addPage([595.28, 841.89]);
  const { width, height } = page.getSize();
  // 添加标题
  page.drawText('发票', {
    x: 50,
    y: height - 40,
    size: 24,
  });
  // 添加客户信息
  let y = height - 80;
  page.drawText(`客户名称：${data.customer.name}`, { x: 50, y, size: 12 });
  page.drawText(`地址：${data.customer.address}`, { x: 50, y: y - 20, size: 12 });
  page.drawText(`税号：${data.customer.taxId}`, { x: 50, y: y - 40, size: 12 });
  // 添加商品明细
  y = height - 120;
  page.drawText('商品名称', { x: 50, y, size: 12 });
  page.drawText('数量', { x: 200, y, size: 12 });
  page.drawText('单价', { x: 300, y, size: 12 });
  page.drawText('金额', { x: 400, y, size: 12 });
  data.items.forEach((item, index) => {
    const itemY = y - (index + 1) * 20;
    page.drawText(item.name, { x: 50, y: itemY, size: 12 });
    page.drawText(item.quantity.toString(), { x: 200, y: itemY, size: 12 });
    page.drawText(`¥${item.unitPrice}`, { x: 300, y: itemY, size: 12 });
    page.drawText(`¥${item.amount}`, { x: 400, y: itemY, size: 12 });
  });
  // 添加总金额
  page.drawText(`总金额：¥${data.total}`, { x: 400, y: height - 200, size: 12 });
  const pdfBytes = await pdfDoc.save();
  return pdfBytes;
}

2.3 下载与展示

生成PDF后，可通过以下方式提供给用户：

• 直接下载：使用<a>标签或Blob API触发下载。
• 浏览器展示：使用PDF.js在页面中渲染。
• 打印：通过window.print()调用系统打印对话框。

下载示例：

async function downloadInvoice(data) {
  const pdfBytes = await generateInvoice(data);
  const blob = new Blob([pdfBytes], { type: 'application/pdf' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `invoice_${data.invoiceNumber}.pdf`;
  a.click();
  URL.revokeObjectURL(url);
}

三、性能优化与安全合规

3.1 性能优化

• 按需加载：使用动态导入（import()）加载PDF库，减少初始包体积。
• Web Worker：将PDF生成任务放到Web Worker中，避免阻塞UI线程。
• 缓存：对频繁生成的发票模板进行缓存。

3.2 安全合规

• 数据加密：敏感信息（如税号）在传输和存储时加密。
• 防篡改：使用数字签名或哈希校验确保PDF未被修改。
• 合规性：遵循当地电子发票法规（如中国《电子签名法》）。

四、总结与建议

前端生成PDF发票的核心在于选择合适的工具链（PDF.js、jsPDF、PDF-Lib），并结合动态数据实现个性化生成。对于简单场景，jsPDF足够；对于复杂布局，PDF-Lib更合适；若需直接展示，PDF.js是首选。

建议：

1. 优先选择纯前端方案：减少对后端的依赖，提升响应速度。
2. 模块化设计：将PDF生成逻辑封装为独立模块，便于复用。
3. 测试覆盖：确保不同浏览器和设备上的兼容性。
4. 安全审计：定期检查数据加密和防篡改机制。

通过以上方法，前端开发者可以高效、安全地实现PDF发票的生成与展示，满足企业财务管理的数字化需求。