React中使用pdf-lib编辑PDF后下载，打开提示加载失败求助

你遇到的问题核心出在Blob对象的创建逻辑上，pdf-lib的pdfDoc.save()返回的是Uint8Array类型数据，但你直接将其传入Blob构造函数的方式不符合规范，导致生成的文件不是有效的PDF格式。

错误原因 #

Blob构造函数的第一个参数必须是包含数据的数组（哪怕只有一个数据项），同时需要明确指定PDF的MIME类型application/pdf，否则浏览器无法正确识别文件格式。你原代码中的这一行是错误的：

const blob = new Blob(pdfBytes);

修复后的完整代码 #

const manageOnClickGenerate = async () => {
    const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer())

    const pdfDoc = await PDFDocument.load(existingPdfBytes);
    // 执行你的PDF编辑操作
    const pdfBytes = await pdfDoc.save();

    // 正确构造Blob：传入数组形式的Uint8Array，并指定MIME类型
    const blob = new Blob([pdfBytes], { type: 'application/pdf' });
    const fileUrl = window.URL.createObjectURL(blob);

    const alink = document.createElement("a");
    alink.href = fileUrl;
    alink.download = "SamplePDF.pdf";
    alink.click();
    
    // 释放URL对象，避免内存泄漏
    window.URL.revokeObjectURL(fileUrl);
}

额外说明 #

• 直接将fetch响应转为Blob可行，是因为res.blob()内部已经正确处理了数据结构和MIME类型，生成了符合标准的Blob对象。
• 新增的window.URL.revokeObjectURL(fileUrl)是必要的，它会释放创建的临时URL，避免长期占用浏览器内存。

内容的提问来源于stack exchange，提问作者Rares Mihai Iordache