浏览器环境下PDFKit从PHP导入图片报错：fs.readFileSync不是函数

这个错误的核心原因是：PDFKit原本为Node.js环境设计，浏览器中不存在Node.js的fs文件系统模块，当传入的图片数据格式不符合浏览器端要求时，PDFKit会尝试调用Node.js的fs.readFileSync方法，从而触发报错。

正确的图片处理方式 #

在浏览器环境中，需将图片转换成Uint8Array格式的二进制数据后，再传递给doc.image()，具体步骤如下：

1. 使用fetch获取图片资源
2. 将响应的ArrayBuffer转换为Uint8Array
3. 把Uint8Array传入doc.image()

修改后的完整代码示例 #

document.getElementById("generate-pdf").addEventListener("click", async function () {
    const doc = new PDFDocument({size: 'A4', margins: { top: 30, left: 30, right: 30, bottom: 80 }});
    const stream = doc.pipe(blobStream());

    const wakaImageUrl = "<?= $page->waka_structure()->toFiles()->first()?->url() ?>"; 
    const coverImageUrl = "<?= $page->images()->template('cover')->first()?->url() ?>";

    // 处理第一张图片
    const wakaResponse = await fetch(wakaImageUrl);
    const wakaBuffer = await wakaResponse.arrayBuffer();
    doc.image(new Uint8Array(wakaBuffer), 50, 50, { width: 200 });

    // 处理封面图片
    const coverResponse = await fetch(coverImageUrl);
    const coverBuffer = await coverResponse.arrayBuffer();
    doc.image(new Uint8Array(coverBuffer), 100, 200, { fit: [400, 300], align: 'center', valign: 'top' });

    doc.end();
    stream.on("finish", function () {
        const url = stream.toBlobURL("application/pdf");
        const a = document.createElement("a");
        a.href = url;
        a.download = "fiche_film.pdf";
        a.click();
    });
});

关键注意点 #

• 不要使用URL.createObjectURL生成的Blob URL传递给doc.image()，PDFKit浏览器端不支持直接加载这种URL
• 确保引入的是浏览器兼容版的PDFKit和blob-stream，比如通过CDN引入：

  <script src="https://cdn.jsdelivr.net/npm/pdfkit@0.13.0/dist/pdfkit.standalone.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/blob-stream@0.1.3/blob-stream.js"></script>
  

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