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

【问题标题】：Edit *existing* PDF in a browser在浏览器中编辑*现有* PDF
【发布时间】：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 样式编辑吗？或者您是否希望进行特定的编辑？什么样的编辑？文本？图片？

标签： javascript pdf html5-canvas pdf.js

【解决方案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-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)

商业：

【讨论】：

【解决方案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 快。