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

Question

我正在寻找一种使用JavaScript在现有PDF上添加文本的方法.我将其设想为用户点击按钮下载PDF并接收带有此原始PDF的文件以及在页面上写入的其他文本.

这有可能吗？

使用现有PDF来保留原始设计非常重要,PDF还包括以不同字体排版的文本和各种unicode字形.

将此文本从网页生成到PDF上也很重要,因为生成的每个文本都会略有不同,从而为最终用户创建唯一的PDF.

我一直在网上研究这个主题并找到了jsPDF库,但这似乎只生成PDF,而不是在现有PDF上编写,而我在PDF上需要的内容太复杂了,无法使用jsPDF生成所有内容.如果我不需要,我不想将现有的PDF用作背景图像.

我还发现了一些像PDFKit这样的后端库,但是如果可能的话,我希望避免使用后端库 - 而且它似乎也不会写入现有的PDF.

我在网上看到了一些关于文本字段的东西,但很难理解这是否是一条可行的路径 - 是否可以在PDF中添加文本字段,然后在用户之前从网页插入文本到这些字段中下载吗？

非常感谢你.

Answer 1

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()

Answer 2

我猜您可以将PDF文件转换为html,或者至少在画布上绘制它.如果可以,您可以使用jsPDF在现有html之上添加overlay 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>

Answer 3

PDF 是只读的，因此一旦创建，就无法编辑，只能阅读。没有办法通过任何程序（更不用说 JavaScript）来做到这一点，除了使用与创建第一个 PDF 相同的步骤完全从头开始生成 pdf 之外。