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

Question

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

但是，当我尝试使用 PDFDocument.image() 函数“绘制”图像文件时遇到了问题：

未捕获的类型错误：fs.readFileSync 不是函数

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

我唯一的猜测是，PDFKit 的开发人员没有包含在没有 Browserify 的情况下在浏览器中使用此特定功能的工作回退 - 使用 Browserify 甚至可以让我访问 fs 模块（同样，从未使用过它） ?这是我唯一的选择吗？我是否缺少使此功能正常工作所需的特定步骤？

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

• pdfkit.js
• blob-stream.js

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

Answer 1

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

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

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

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

为什么可能？嗯……

1. 如果有很多 fs 函数的用法，你显然想用一些库来做

2. 同步请求。我猜你是从某个 url 加载图像，所以你必须在 fs.readFileSync 的实现中使用同步请求来达到预期的结果。这没什么大不了的，但您会在控制台中收到警告。

附：抱歉，但是您很可能会遇到更多问题，因为在服务器端创建 pdf 更为常见。为什么不移动到后端？ ;)