如何使用Javascript为运行时生成的PDF添加附件

方案1：直接使用jsPDF内置附件能力（适配原有生成逻辑） #

如果不想改动现有jsPDF生成PDF的流程，可直接使用jsPDF官方提供的附件功能，无需额外引入第三方库：

• 需使用2.5.0及以上版本的jsPDF，旧版本未内置附件插件
• 支持文本、二进制等任意格式的附件嵌入

代码示例：

import { jsPDF } from "jspdf";

// 原有从HTML生成PDF的逻辑
const doc = new jsPDF();
doc.html(document.querySelector("#target-html"), {
  callback: (doc) => {
    // 添加文本附件
    const txtContent = "这是附件文本内容";
    doc.addAttachment(txtContent, "说明文档.txt", "附件描述", "text/plain");

    // 添加二进制附件示例（如Excel、图片等）
    // const excelBuffer = new Uint8Array(excelFileArrayBuffer);
    // doc.addAttachment(excelBuffer, "销售报表.xlsx", "2024年销售数据", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");

    // 导出保存PDF
    doc.save("带附件的导出文件.pdf");
  },
  x: 10,
  y: 10
});

方案2：jsPDF + pdf-lib 组合方案（适配复杂需求） #

如果需要更灵活的附件配置（如设置附件创建时间、修改权限，或批量添加多个附件），可先用jsPDF生成基础PDF，再用pdf-lib处理添加附件：

• pdf-lib是纯JS实现的PDF处理库，无原生依赖，兼容浏览器和Node.js环境
• 支持对任意来源的PDF做附件追加，不局限于jsPDF生成的文件

代码示例：

import { jsPDF } from "jspdf";
import { PDFDocument } from "pdf-lib";

// 1. 用jsPDF生成基础PDF
const doc = new jsPDF();
doc.text("PDF正文内容", 10, 10);
const basePdfBuffer = doc.output("arraybuffer");

// 2. 用pdf-lib加载PDF并添加附件
const pdfDoc = await PDFDocument.load(basePdfBuffer);
// 添加文本附件
const txtAttachment = new TextEncoder().encode("附件内容");
pdfDoc.attach(txtAttachment, "附件1.txt", {
  description: "这是第一个附件",
  mimeType: "text/plain",
  creationDate: new Date(),
  modificationDate: new Date()
});
// 可重复调用attach方法添加多个附件
// const imgAttachment = new Uint8Array(imgArrayBuffer);
// pdfDoc.attach(imgAttachment, "截图.png", { mimeType: "image/png" });

// 3. 导出处理后的PDF并保存
const processedPdfBytes = await pdfDoc.save();
const blob = new Blob([processedPdfBytes], { type: "application/pdf" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "带附件的导出文件.pdf";
a.click();
URL.revokeObjectURL(url);

兼容性说明 #

两种方案生成的带附件PDF，都可被Adobe Acrobat、WPS、Chrome内置PDF阅读器等主流工具正常识别，附件可在阅读器的附件面板中查看、下载。

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