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

Edit *existing* PDF in a browser

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

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

我找到了 jsPDF,虽然我可以使用 canvas 并为每个页面做一个 .toDataURL() 并用它构建一个新的 PDF 文档,但有两个问题:

  1. 新生成的 PDF 将只是每页上的一系列图像,因此原始 PDF 中的任何文本在我完成处理后都将只是图像。
  2. 我用 jsPDF 生成一个新的 PDF,然后将它的 base64 发送回 pdf.js 以在 canvas 上显示它。在这些步骤之间发生了一些事情,页面的图像缩放不正确,因此在每次新的 PDF 更改后,每个页面约占 canvas 的 3/4。我一直无法让它保留相同的 size/scale。

jsPDF 看起来没有加载现有 PDF 的方法,它只能创建新的 PDF。 pdfmake and PDFKit 看起来他们也只创建新的 PDF 文件。


所以我的问题是:

是否有任何既可以查看 pdf(来自 base64)又可以对其进行更改的东西? 理想情况下,我会观察 canvas 的变化,然后将该变化绘制到 pdf 页面上。完成后,将其导出为 base64 字符串以发送回服务器。

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

[编辑 2021 年 6 月 29 日-鉴于此问题来自 2017 年,您可能认为它已经过时并打折。好吧,据我所知,答案仍然是相关的,每隔一周就会有人通过并投赞成票。但是如果你在旅途中确实找到了一个好的 lib 或 util,请回来列出它。谢谢。]

长答案 - PDF 格式既精彩又邪恶。因其便携性而出色,但因其内部结构和存储机制而令人生厌。没有 HTML 那样的友好 'DOM'。如果我们重新开始开发可移植的文档格式,我们不会选择 PDF。但 PDF 目前势头太大,不能扔掉,句号。

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

回到问题 - 要以任何有意义的 GUI 方式编辑 PDF,您需要解压缩 PDF 并将组件(图像、格式化文本、页面)渲染到显示设备;然后允许人们弄乱布局;然后重新打包PDF。您必须完全按照 PDF 标准执行此操作,否则您可能会发现已编辑 PDF 文件的下游消费者崩溃或无法呈现它。您将不得不迎合各种 Acrobat 标准级别,以及编辑包(Word、Illustrator、InDesign)供应商加入 PDF 文件的快捷方式和膨胀;图层、缩略图等

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

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

考虑到 PDF 中的分层、缩放和旋转功能,您可能会将 html canvas 视为绘图表面。任何知道的人都会告诉你,在 canvas 的世界里,你几乎只能靠自己来完成文字处理类型的功能。

不是不可能,而是很难。

将 PDF 渲染到显示器的组件主要充当打印驱动程序,盲目地服从 PDF 绘图指令,并且通常生成光栅或有时生成 SVG 图形。这是一条单行道——他们读书画画,但画出来的东西没有'handles'的感觉。没有句柄就没有操纵,这些家伙肯定没有让你修改回写的意思。

您会发现许多 'save to pdf' 产品。当在客户端时,他们将倾向于抓取一组像素并将光栅图形转储到文件中,并用 'PDF' 定义的最薄单板包裹它。如果它们基于服务器,那么它们可能非常强大 - 有很多工具,如 Aspose 和 ABCPDF,它们真正提供了一些 PDF 处理服务器端 - 但这不是你在 OP 中寻找的东西。

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

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

这是对您(假设的)需求的务实回答,尽管它在字体(许可)问题、基于浏览器的编辑器的笨拙、HTML 由一些 HTML 编辑组件等制定。但它是可行的。

最后的想法 - 重新考虑你需要的范围。如果 HTML 在服务器上编辑和转换为 PDF 对你有用,那么这是一条老路,你会发现客户端和服务器的免费和商业组件都支持它。

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

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

供将来参考:

我找到了两个库,它们使您能够在浏览器中对现有 PDF 进行一定程度的编辑。第二个还没有记录,所以我不知道它到底做了什么。这可能是未来此类问题的解决方案。

因为这里针对其他 SO 问题,并且考虑到网络技术进步的速度(例如 WASM),我提供以下答案。虽然 PDFNetJS 在最初提出问题时能够完成所有这些工作。

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

PDFTron PDFNet SDK可以做到这一切。提供了一个完整的、开箱即用的文档查看器,具有完整的注释支持。也可以实际编辑 PDF(change/replace 文本、编辑、extract/add/replace 图像等)。客户端不仅直接支持 PDF 文件,还支持 DOCX、PPTX、XLSX、PNG 和 JPG。本地或远程均可加载文件,无需慢速base64encoding/decoding.

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

样本:http://www.pdftron.com/documentation/web/samples/universal-samples

最初的问题也是为了支持 Siebel 和“PDFNetJS 试图检索一个 .mem 文件,这是一些二进制数据。我正在使用的应用程序 (Siebel) 无法提供此服务所以看起来这不是一个选项。".

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

社区:

商业广告: