如何在Angular中实现多PDF文件生成并打包为ZIP下载

1. 安装依赖包 #

需要用到三个工具库：jspdf 用于前端生成PDF、jszip 用于打包ZIP文件、file-saver 用于触发浏览器下载，执行以下命令安装：

npm install jspdf jszip file-saver
# TypeScript项目需额外安装类型声明包
npm install @types/file-saver --save-dev

2. 核心功能实现 #

首先在需要用到该功能的组件中导入依赖：

import jsPDF from 'jspdf';
import JSZip from 'jszip';
import { saveAs } from 'file-saver';

2.1 单个PDF生成方法 #

封装方法生成单个PDF，返回Blob格式供后续打包使用：

// 入参可根据业务需求自定义，示例为简单文本PDF生成
private generateSinglePdf(pdfData: { title: string; content: string }): Promise<Blob> {
  return new Promise((resolve) => {
    const doc = new jsPDF();
    // 设置PDF内容，可根据需求扩展表格、图片、HTML转换等逻辑
    doc.setFontSize(16);
    doc.text(pdfData.title, 10, 10);
    doc.setFontSize(12);
    doc.text(pdfData.content, 10, 20);
    resolve(doc.output('blob'));
  });
}

2.2 批量打包ZIP并下载方法 #

/**
 * 批量生成PDF并打包ZIP下载
 * @param pdfList 所有PDF的数据源数组
 * @param zipFileName 导出的ZIP压缩包名称
 */
async exportPdfZip(pdfList: { title: string; content: string }[], zipFileName = '批量PDF导出.zip') {
  const zipInstance = new JSZip();
  // 遍历生成所有PDF并加入压缩包
  for (let i = 0; i < pdfList.length; i++) {
    const pdfBlob = await this.generateSinglePdf(pdfList[i]);
    // 自定义PDF文件名，确保不重名
    zipInstance.file(`文档${i + 1}_${pdfList[i].title}.pdf`, pdfBlob);
  }
  // 生成ZIP文件并触发浏览器下载
  const zipBlob = await zipInstance.generateAsync({ type: 'blob' });
  saveAs(zipBlob, zipFileName);
}

3. 调用示例 #

在模板绑定点击事件，或者业务逻辑中直接调用即可：

// 示例：按钮点击触发导出
onBatchExport() {
  // 替换为实际业务中的PDF数据源
  const businessPdfData = [
    { title: '合同A', content: '合同A的正文条款内容' },
    { title: '合同B', content: '合同B的正文条款内容' },
    { title: '合同C', content: '合同C的正文条款内容' }
  ];
  this.exportPdfZip(businessPdfData, '合同批量导出包.zip');
}

注意事项 #

• 大量PDF或者大体积PDF生成时，建议添加加载状态，避免UI阻塞无响应
• 如果PDF由后端接口返回，可直接将接口返回的Blob塞入JSZip，无需前端生成
• 生成包含表格、复杂样式的PDF时，可配合jspdf-autotable等扩展库实现

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