PDFKit 无法在浏览器中加载图像

Question

我正在使用 PDFKit 在浏览器中生成 PDF，然后将该 PDF 的 blob 数据发送到新选项卡以供用户下载。我真的很喜欢 PDFKit...它非常漂亮。

但是，当我尝试将 PDFDocument.image() 函数用于 "draw" 图像文件时，我运行遇到了一个问题：

Uncaught TypeError: fs.readFileSync is not a function

我对 Node 非常熟悉，所以我立即认出了该方法签名 - 浏览器本身没有 fs！我不太熟悉 Browserify，而是选择使用 pre-built version of PDFKit 来避免必须集成另一个我什至不熟悉的依赖项。

我唯一的猜测是 PDFKit 的开发人员没有包括在没有 Browserify 的情况下在浏览器中使用此特定功能的工作后备 - 使用 Browserify 甚至可以让我访问 fs 模块（再次，没用过）？那是我唯一的选择吗？我是否缺少使此功能正常工作所需的特定步骤？

目前我包括以下 JS 文件作为我的 generate_pdf.js 文件的依赖项：

是否有我也需要的模拟 fs 的模块？我没有看到记录，但这是漫长的一天。

Answer 1

好吧，有一些库（例如 this or this），但我强烈建议您编写自己的库 fs.readFileSync。

由于无论如何您都不可能从浏览器访问客户端的文件系统，因此使用某些现有解决方案将意味着添加抽象级别等。

所以，可能最简单的解决方案是添加

var fs = {
  readFileSync: (path) => {
    // magic
  }
}

为什么可能？嗯...

如果有许多 fs 函数的用法，你显然想用一些库来完成它
同步请求。我猜你是从一些 url 加载图像，所以你必须在 fs.readFileSync 的实现中使用同步请求来达到预期的结果。这没什么大不了的，但是您会在控制台中收到警告。

P.S。抱歉，您很可能会遇到更多问题，因为在 server-side 上创建 pdf 更为常见。为什么不移动到后端？ ;)

PDFKit Can't load image in browser