如何在网站上使用 JavaScript 在现有 PDF 上添加文本？答案

【问题标题】：How to add text on top of an existing PDF using JavaScript on a website?如何在网站上使用 JavaScript 在现有 PDF 上添加文本？
【发布时间】：2014-06-19 17:38:18
【问题描述】：

我正在寻找一种使用 JavaScript 在现有 PDF 之上添加文本的方法。我将其设想为用户单击按钮下载 PDF 并接收包含此原始 PDF 的文件和写在页面上的附加文本。

有什么办法可以做到吗？

使用现有的 PDF 以保留其上的原始设计非常重要，并且 PDF 还包括以不同字体和各种 unicode 字形专门排版的文本。

从网页生成此文本到 PDF 也很重要，因为生成的每个文本都会略有不同，从而为最终用户创建一个独特的 PDF。

我一直在网上研究这个话题，找到了jsPDF库，但是那个好像只生成PDF，而不是写在现有的PDF之上，而且我需要的PDF内容太复杂，无法使用jsPDF生成全部。如果没有必要，我不想使用现有的 PDF 作为背景图片。

我还发现了一些后端库，例如 PDFKit，但我希望尽可能避免使用后端库，而且它似乎也不会覆盖现有的 PDF。

我在网上看到了一些关于文本字段的信息，但无法理解这是否可行——是否可以在 PDF 中添加文本字段，然后从网页将文本插入这些字段在用户下载之前？

非常感谢。

【问题讨论】：

我在这个领域没有经验，但首先想到的是像 pagedown 这样的降价编辑器，在 StackOverflow 上用于格式化问题。它有用于生成 pdf 而不是 html 的插件，但它们可能需要服务器端脚本
我不知道有任何 JavaScript 库可以让你这样做，但你发现有很多服务器端库，它们工作得非常好，完全符合预期。 iText (Java) 和 iTextSharp (.Net) 是我个人知道的两个，它们完全可以满足您的需求。
嘿伙计，你没有提到任何关于服务器支持的事情。在我工作的地方，我们根据发送到 Rails 服务器的变量创建自定义 .pdf 报告。我可以看到有类似的东西，你将现有的 .pdf 和输入文本分层到一个合并的 .pdf 中。如果这是一个选项，我们会发疯的。
您是说您的要求是在浏览器中使用 javascript 执行此操作吗？我已经多次完成了这个确切的事情，但我依靠我的服务器运行时来伪造它。（IIS，或在向用户吐出最终 pdf 流之前执行的东西。）然后可以使用服务器环境的所有 3rd 方工具，即使 pdf 在服务器上并且不受您的控制，您也可以这样做通过添加 pdf 图层并添加您的文本或图形。我通常将其添加到新图层。获取原始 PDF DPI 分辨率，不要假设所有 pdf 都具有相同的分辨率和比例。
@taystack，在我的特殊情况下，LAMP(PHP) & 我现在这样做的方式是 . . .在客户端通过JS生成图表，转换为画布，转换为BASE64，发送到服务器，将BASE64转换为PNG。服务器使用 TCPDF 库 + FPDI 使用现有的 PDF 作为模板 + 在其上添加图像 + 文本，将其发送回客户端。我希望摆脱精神错乱并使用纯粹的 JS 方法。

标签： javascript html pdf dynamically-generated

【解决方案1】：

PDF 是只读的，因此一旦创建就无法编辑，只能读取。除了使用与创建第一个相同的步骤完全从头开始生成 pdf 之外，没有办法通过任何程序来执行此操作，更不用说 Javascript。

【讨论】：

这并不完全正确。有许多程序和库可让您在现有 PDF 上添加额外内容。不过，我不知道现有的 js 代码是否允许这样做。
进一步了解@mkl 所说的，直接来自规范：7.5.6 增量更新：PDF 文件的内容可以增量更新而无需重写整个文件。
我也对此进行了进一步研究，并同意 mkl 和 Chris Haas 的观点。确实有很多方法可以在 PDF 上标记文本！感谢您的帮助。
这不是真的，在 javascript 中有几个库可以帮助你实现这一点。

【解决方案2】：

我猜您现在可以将您的 PDF 文件转换为 html 或至少将其绘制在画布上。如果可以，您可以使用jsPDF 在现有 html 之上添加覆盖 html 以生成新的 PDF 文件。

var doc = new jsPDF();

doc.addHTML(document.body, function() {
    doc.text(20, 20, 'Hello world!');
    doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
    doc.addPage();
    doc.text(20, 20, 'Do you like that?');
    printData();
});

printData = function() {
  var str = doc.output('datauristring');
  console.log(str);
  // window.open(str);  Optional
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>


<div id="mypdf">
  <div>
    My Pdf Content Here
  </div>
</div>

【讨论】：

我收到示例 TypeError: elements is null; elements = (elements.length) ? elements : [elements]; html2canvas.js (line 2660, col 9) 的错误。但是您是说如果我可以将 PDF 转换为 HTML，那么我可以重用该 HTML 并使用上述方法添加到其中？就我而言，PDF 是基于矢量的 CAD 绘图，可以以任何放大倍率进行缩放和查看或打印。将其转换为画布可能会很糟糕（我曾经在缩放之前和缩放时将这些绘图作为图像文件，它遭受了不良的图像伪影）
我想在我的情况下，如果我想要牵引力，我必须先将有问题的 PDF 转换为其他东西。但到目前为止，将其保留为 PDF 是“阻力最小”的路径
即使使用这种方法，最终 html 也会被转换为图像并打印在 pdf 之上。使用这种方法打印的 html 会降低质量。我猜你可以自己解析html并将文本和图像写入pdf。但是矢量图像是毫无疑问的。您需要的是一个功能齐全的 pdf 创建库。抱歉，我不知道有任何此类客户端库。
奖励赏金，因为。

【解决方案3】：

找到了这个解决方案。抱歉，但这确实涉及在服务器端做一些工作。 :)

涉及

使用pdf2htmlEX将pdf转换为html。
根据需要操作 html。您可能可以使用 cheerio 来更轻松地进行 dom 操作。
使用 jspdf 之类的东西将 html 转换回 pdf。

更多信息here。

【讨论】：

【解决方案4】：

https://pdf-lib.js.org/库支持修改现有PDF文件。

const pdfDoc = await PDFDocument.load(...)
const pages = pdfDoc.getPages()
pages[0].drawText('You can modify PDFs too!')
const pdfBytes = await pdfDoc.save()

【讨论】：