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

时间:2017-05-19 15:21:48

标签: javascript pdf html5-canvas pdf.js

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

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

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

  1. 新生成的PDF只是每页上的一系列图像,因此原始PDF中的任何文字都只是我完成后的图像。
  2. 我使用jsPDF生成一个新的PDF,然后将它的base64发送回pdf.js以在画布上显示它。在这些步骤之间发生了一些事情,其中​​页面的图像缩放不正确,因此每次新的PDF更改后,每个页面占据画布的大约3/4。我一直无法保持相同的尺寸/规模。
  3. jsPDF看起来没有办法加载现有的PDF,它只会创建新的PDF。 pdfmakePDFKit看起来也只是创建新的PDF文件。

    所以我的问题:

    是否有任何内容可以同时查看pdf(来自base64)以及对其进行更改? 理想情况下,我会关注画布的更改,然后将该更改绘制到pdf页面上。完成后,将其导出到base64字符串以发送回服务器。

4 个答案:

答案 0 :(得分:18)

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

为什么 - PDF格式同时也是精彩和恶魔。由于其便携性而非常出色,但由于内部结构和存储机制的恶魔。没有友好的DOM&#39; DOM&#39;和HTML一样。如果我们重新开始开发便携式文档格式,那么我们不会选择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画布视为绘图表面。任何知道的人都会告诉你,在画布世界里,你几乎都是自己的文字处理类型功能。

并非不可能,但很难。

将PDF呈现给显示器的组件主要用作打印驱动程序,盲目服从PDF绘图指令,并且通常生成栅格或有时生成SVG图形。这是一条单行道 - 他们阅读和画画,但没有“把手”的感觉。到绘制的对象。没有句柄意味着没有操纵,这些人肯定没有意图让你修改和回写。

你会发现很多&#39;保存到pdf&#39;产品。当客户端他们将倾向于抓取一组像素并将光栅图形转储到文件中,其中最薄的贴面是“PDF&#39;包裹着它的定义。如果它们是基于服务器的,那么它们可以非常强大 - 有很多像Aspose这样的工具和ABCPDF真正提供一些PDF争论服务器端 - 但这不是你在OP中寻找的。

总结 - 非常复杂的主题。如果任何事情都有可能出现,那么它可能会对所涵盖的PDF功能产生很多限制,从而限制它可以安全编辑的内容。

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

这是对您(假设)需求的实用答案,尽管在字体(许可)问题,基于浏览器的编辑器的笨拙,HTML的全面怪异方面仍有一些权衡取舍。一些HTML编辑组件等。但它是可行的。

最后的想法 - 重新思考你需要的范围。如果HTML编辑和转换为服务器上的PDF可用于您,它是一个很好的路径,您将找到客户端和服务器的免费和商业组件来支持它。

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

编辑:读者可能有兴趣知道我上面描绘的图片是否已经改变。截至2019年1月,我坚持自己所写的内容。供应商通过更好的工具和库来进入市场,这些工具和库可以比以前做得更多。但是,您仍需要评估您的需求并确认其限制 - 很可能会有一些。没有供应商我知道有任何 PDF文件的客户端,跨浏览器,跨设备,全功能PDF编辑库 - 总有一些限制。但我很高兴得到纠正。

答案 1 :(得分:5)

供将来参考:

我找到了两个库,使您可以在浏览器中编辑现有的PDF到某些扩展。第二个还没有记录,所以我不确切知道它的作用。这可能是未来解决这个问题的方法。

答案 2 :(得分:2)

由于这里有其他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)无法提供此文件,因此它不能。”看来这是一个选择。“。

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

答案 3 :(得分:1)