在浏览器中编辑*现有* PDF

Posted 2023-02-24

【中文标题】在浏览器中编辑*现有* PDF

【英文标题】：Edit *existing* PDF in a browser

【发布时间】：2017-10-19 19:12:50

【问题描述】：

我有一个 Web 应用程序，它当前正在从服务器获取 PDF 的 base64 表示。我可以使用 Mozilla 的 pdf.js 在 <canvas> 上显示它，并通过下拉菜单切换页面。

根据我能找到的所有内容和Can Mozilla's pdf.js modify PDFs?，无法使用 pdf.js 编辑 PDF。

我找到了jsPDF，虽然我可以使用画布并为每一页使用.toDataURL() 并用它构建一个新的 PDF 文档，但有两个问题：

新生成的 PDF 将只是每一页上的一系列图像，因此原始 PDF 中的任何文本在我完成后都将只是一个图像。 我用 jsPDF 生成了一个新的 PDF，然后将它的 base64 发送回 pdf.js 以在画布上显示它。在这些步骤之间会发生页面图像缩放不正确的情况，因此在每次新的 PDF 更改后，每个页面都会占用大约 3/4 的画布。我一直无法让它保持相同的大小/比例。

jsPDF 看起来没有办法加载现有的 PDF，它只会创建新的 PDF。 pdfmake 和 PDFKit 看起来也只是创建新的 PDF 文件。

---

所以我的问题：

是否有任何东西可以同时查看 pdf（来自 base64）和对其进行更改？ 理想情况下，我会注意画布的更改，然后将更改绘制到 pdf 页面上。完成后，将其导出为 base64 字符串以发送回服务器。

【问题讨论】：

你可以看看PDFNetJS。

我见过那个。这有点矫枉过正。与其包含一个或两个 JS 文件，看起来您需要包含多个资产文件夹，而且很难让这个在我的环境（Siebel 应用程序）中工作。不过，我正在尝试这个，直到找到一个更好的解决方案。

PDFNetJS 尝试检索 .mem 文件，这是一些二进制数据。我正在使用的应用程序 (Siebel) 无法提供此服务，因此看起来这不是一个选项。

我在开发 PDFNetJS 的公司工作。这是一个完整的查看/编辑 PDF SDK，可以在浏览器中完全运行在客户端。 .mem 文件是 Chrome 的 PNaCl 字节格式。 PDFNetJS 还将 WASM 用于 FireFox，并将 emscripten 作为最终后备（例如 IE11）。 “有点矫枉过正”，要支持世界上任何PDF文件，PDFNetJS需要很大，PDF标准复杂且庞大（例如JPEG2000，JBIG2，CCITT，多种字体格式，多种编码等）。跨度>

"修改它？"是指 MS Word 样式编辑吗？或者您是否希望进行特定的编辑？什么样的编辑？文本？图片？

【参考方案1】：

快速回答 - 不，您不太可能找到跨浏览器的解决方案。您不太可能找到完美的 PDF 解决方案。最好考虑让用户编辑 html 并在服务器上生成 PDF。

[编辑 2021 年 6 月 29 日-鉴于这个问题来自 2017 年，您可能认为它已经过时并打折。好吧，据我所知，答案仍然是相关的，每隔一周就会有人通过并给予支持。但是，如果您在旅途中确实找到了一个好的库或实用程序，请回来并列出它。谢谢。]

长答案 - PDF 格式既出色又可怕。出色是因为它的便携性，但因为内部结构和存储机制而令人讨厌。没有像 HTML 那样友好的“DOM”。如果我们重新开始开发可移植文档格式，我们不会选择 PDF。但 PDF 目前有太多的动力，不能被抛弃。

年轻的观众可能想知道这种***的格式到底是如何进入市场领先地位的，以及它是从哪里来的。好吧，当 PDF 的创始人制定设计时，在 XML、JSON、HTML 甚至 Internet 出现之前，他们并没有考虑到今天的文档共享。他们正在研究一种更好的方式来编码打印指令 - PostScript 打印机驱动程序概念。在打印机使用它们之前，从来没有期望它们被编辑过，而且它们对于任何其他目的都是毫无价值的。然后有人注意到您可以将 PostScript 绘图指令解释到屏幕上，随后有人发现了将其用作可移动、跨设备显示概念的巨大潜力。我们到了。

回到问题 - 要以任何有意义的 GUI 方式编辑 PDF，您需要解压缩 PDF 并将组件（图像、格式化文本、页面）呈现到显示设备；然后让人们弄乱布局；然后重新打包PDF。您必须按照 PDF 标准完美地执行此操作，否则您可能会发现您编辑的 PDF 文件崩溃的下游消费者或无法呈现它。您必须满足各种 Acrobat 标准级别，以及编辑包（Word、Illustrator、InDesign）供应商在 PDF 文件中插入的快捷方式和臃肿；图层、缩略图等。

然后我们来看看颜色。阅读 PDF 规范，您会发现原始 PDF 制作者可以决定使用一系列色彩空间选项。您必须将这些解释为屏幕和背面等合理的设备颜色。

然后是字体。字体可能是嵌入的子集，也可能不是。为了保持 PDF 的保真度，您需要在绘图表面上以 PDF 中定义的比例将字形实现为矢量图形。这主要意味着利用某种依赖于平台的类型库——棘手的跨平台。此外，您需要为适当使用的字体获得许可，这对于大多数人想要看起来时髦和专业的字体来说可能是昂贵的。

鉴于 PDF 中的分层、缩放和旋转功能，您可能会将 html 画布视为绘图表面。任何知道的人都会告诉你，在画布的世界里，你几乎可以靠自己来处理文字处理类型的功能。

不是不可能，但很难。

将 PDF 渲染到显示器的组件主要充当打印驱动程序，严格遵守 PDF 绘图指令，并且通常生成光栅或有时生成 SVG 图形。这是一条单向的街道——他们阅读和绘画，但对所绘制的物体没有“把手”的感觉。没有句柄就意味着没有操纵，这些家伙当然不会让你修改和回信。

您会发现许多“保存为 pdf”的产品。在客户端时，他们将倾向于抓取一组像素并将光栅图形转储到一个文件中，并在其周围包裹着最薄的“PDF”定义单板。如果它们是基于服务器的，那么它们可以非常强大 - 有很多工具，如 Aspose 和 ABCPDF 真正提供了一些 PDF 处理服务器端 - 但这不是您在 OP 中寻找的。​​p>

总结 - 非常复杂的主题。如果有任何东西作为潜力出现，那么它可能会在所涵盖的 PDF 功能方面受到许多限制，从而限制它可以安全编辑的内容。

如果您正在寻找最终导出为 PDF 的文档的在线编辑，那么一种方法是保留文档源的 html 版本并让用户使用 TinyMCE、CKEditor 等进行编辑，然后使用其中一个服务器端工具，用于获取保存的源 HTML 并呈现为 PDF。 ABCPDF 之类的工具可以忠实地呈现 HTML，让您可以添加图像、页眉和页脚、页码等。

这是对您（假设的）需求的务实回答，尽管它在字体（许可）问题、基于浏览器的编辑器的笨重性、由一些 HTML 编辑组件等。但它是可行的。

最后的想法 - 重新考虑您需要的范围。如果在服务器上进行 HTML 编辑和转换为 PDF 对您来说是可用的，那么这是一条成熟的道路，您将找到客户端和服务器的免费和商业组件来支持它。

编辑：如果您需要对 PDF 进行注释，那么事情就容易多了。在服务器上，您需要生成文档页面的图像，将它们发送到客户端，将它们显示给用户，让用户标记它们，将注释的坐标捕获回服务器并使用服务器端 PDF 库将注释呈现到 PDF 中。这是可以实现的，但需要各种技能组合，从服务器端 PDF 到图像处理以及客户端演示和注释捕获。

编辑：读者可能有兴趣知道我上面画的图片是否发生了变化。截至 2019 年 1 月，我坚持我所写的内容。供应商带着比以前做得更多的更好的工具和库进入市场。但是，您仍然需要评估您的需求并确认他们的限制——很可能会有一些限制。我所知道的供应商还没有为 any PDF 文件提供客户端、跨浏览器、跨设备、全功能的 PDF 编辑库 - 总是有一些限制。但我很高兴得到纠正。

【讨论】：

基本上，用户需要打开之前上传的 PDF，突出显示或圈出部分，然后将这些注释保存到 PDF 回服务器上。由于应用程序的设置，除了发送和接收文件的 base64 之外，我实际上无能为力。我希望获取 PDF 并在其上绘制高光图像。无需对文档内容进行文本编辑或操作。

感谢您如此深入的回复。我要看看我们是否不能改变这里的要求。如果我很快找不到其他答案，我会将您的答案标记为正确。

你好！关于获取在 PDF 上绘制的“注释”框的坐标（可能在单独的覆盖画布中），您对如何准确确定绘制框开始的 PDF X、Y 坐标有任何建议吗（左上）连同所述框的高度/宽度？我不需要将这些重写为 PDF，只需要能够获取并存储它们。提前致谢！ :)

@TimKelly 这是一个广泛的问题。您在哪个技术领域工作？ C#、php 等？

@VanquiishedWombat - 所以，我们实际上不需要添加“注释”本身，我们更需要知道在 PDF 上绘制的框的坐标，我读过一堆声称 X,Y 系统在 PDF 中与在浏览器中不同的帖子的数量 - 但我刚刚开始开发应用程序的这一部分，所以发现它会很有趣！基本上，我们在浏览器中显示用户上传的 PDF，并使用 Fabric.js，允许用户在 PDF 上绘制框 - 使用这些坐标/尺寸，我们稍后将从 PDF 中截取图像。如果我遇到具体问题，我会回复。再次感谢！

【参考方案2】：

供日后参考：

我找到了两个库，可以让您在浏览器中编辑现有的 PDF 到某些扩展。第二个还没有记录，所以我不知道它到底是做什么的。它可能是未来此类问题的解决方案。

PDF Assembler pdf-lib

【讨论】：

我正在使用 pdf-lib。在现有的 pdf 上绘制元素或从头开始创建新的 pdf 非常好。文档非常清晰，API 也足够友好。但是 pdf 是一种晦涩难懂的格式，还有很长的路要走，维护者似乎对他的 lib 的成功有点不知所措。我希望社区能来拯救他，因为我们可以有一个适当的库来处理 javascript 中的 pdf 问题

@Sharcoux pdf-lib 是否具有从浏览器端在 pdf 中添加注释和 cmets 的功能？我阅读了文档，但没有任何解释。

我已成功将它与 react-native-web 一起使用，所以是的，您可以从浏览器中使用它。但是您仍然需要处理 UI。 pdf-lib 仅提供一种更改文件的方法。您可以使用 react-pdf 之类的库来绘制 pdf

【参考方案3】：

社区：

pdf-annotate (unmaintained)

商业：

metapdf(abandoned) pdftron PSPDFkit

【参考方案4】：

因为这里有其他 SO 问题，并且考虑到 Web 技术的发展速度有多快（例如 WASM），所以我提供以下答案。虽然 PDFNetJS 在最初提出问题时能够做到这一切。

由于“编辑”的要求被明确为“基本上需要用户打开以前上传的 PDF，突出显示或圈出部分，然后将这些注释保存到 PDF 回到服务器上.”和“不需要对文档内容进行文本编辑或操作。”，那么是的，这完全可以在任何现代设备上的任何现代浏览器中实现。

PDFTron PDFNet SDK 可以做到这一切。提供了一个完整的、开箱即用的文档查看器，并具有完整的注释支持。也可以实际编辑 PDF（更改/替换文本、编辑、提取/添加/替换图像等）。不仅客户端直接支持 PDF 文件，还支持 DOCX、PPTX、XLSX、PNG 和 JPG。文件可以本地或远程加载，无需慢速base64编码/解码。

演示：http://www.pdftron.com/webviewer

示例：http://www.pdftron.com/documentation/web/samples/universal-samples

最初的问题也是为了支持 Siebel 和“PDFNetJS 尝试检索 .mem 文件，这是一些二进制数据。这不能由我正在使用的应用程序 (Siebel) 提供，所以它没有” t 看起来这是一个选项。"。

.mem 文件适用于仅适用于 Chrome 的 PNaCl，可以禁用。 PDFTron for Web 支持 WASM 甚至 emscripten，其中之一（如果不是两者）应该与 Siebel 兼容。

【讨论】：

嗨瑞恩。 WASM 作为一种通用技术看起来很有趣——你知道采用增长曲线是什么样的吗？ PDFTron 看起来也很强大——它的局限性是什么？是否可以捕获正在编辑的 PDF 之外的注释详细信息 - 以便您可以存储在历史数据库中？

@VanquiishedWombat “你知道采用增长曲线是什么样的吗？”目前还不够，我们仍然在 Chrome 上使用 PNaCl（它仍然提供比 Chrome WASM 更好的性能），以及 emscripten/asm.js 作为 IE11 的最终备份（这仍然是我们典型客户的流行）。适用于 android 的 ios11 和 Chrome 67+。但是，如果 WASM 的 Firefox 实现有任何迹象，那么未来确实是光明的。启动时间非常快，而且性能非常好。

@VanquiishedWombat “而且 PDFTron 看起来也很强大 - 它有什么限制？”用于网络查看？我们提供的服务器组件是理想的，它允许在任何现代设备和浏览器上查看和注释，甚至是旧的 iOS 和 Android 设备。这将是一个混合解决方案，例如，如果用户在 Chrome 桌面上，那么服务器将只提供一些图像来启动，但随后客户端将完全接管，服务器将处于空闲状态。而较旧的设备将得到服务器的更多帮助。博客：pdftron.com/blog/webviewer/webviewer-3-2

@VanquiishedWombat “是否可以捕获正在编辑的 PDF 之外的注释详细信息 - 这样您就可以将其存储在历史数据库中？”是的，PDFTron 使用 PDF ISO 标准中指定的基于 XML 的 XFDF 格式进行注释数据交换。您可以使用这些 XFDF 字符串处理多个用户、实时协作和版本控制，并且它们与任何数据库技术兼容。您可以随时将 XFDF 数据合并到源 PDF 中，并为用户提供本地注释副本。您还可以注释图像、文本文件和办公文档。

WASM 有着光明的未来，不仅在浏览器中，而且在服务器端（例如使用 NodeJS）。我不认为它与 javascript 相比，而是一种并行（互补）技术。对于像 PDFTron 这样需要高性能渲染的供应商（HTML5 画布不涵盖 PDF 标准），WASM 非常令人兴奋。至于“完全”采用，当然可以，但只要有后备方案，或者这些情况是边缘的，就不是真正的问题。请注意，Chrome PNaCl 仍然是一项很棒的技术（Google 已经将 PNaCl 的弃用推迟了一年，我怀疑他们会再次推迟），因为它仍然比 WASM 快。