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

Question

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

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

Uncaught TypeError: fs.readFileSync is not a function

我对 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 更为常见。为什么不移动到后端？ ;)