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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23438253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 00:52:39  来源:igfitidea点击:

How to add text on top of an existing PDF using JavaScript on a website?

javascripthtmlpdfdynamically-generated

提问by ar-ar

I am looking for a way to add text on top of an existing PDF using JavaScript. I envision it as a user clicking a button to download the PDF and receiving a file with this original PDF and additional text written over the pages.

我正在寻找一种使用 JavaScript 在现有 PDF 之上添加文本的方法。我把它想象成用户点击一个按钮来下载 PDF 并接收一个包含这个原始 PDF 和写在页面上的附加文本的文件。

Is there any way this could be possible?

有没有办法做到这一点?

It is important to use an existing PDF to preserve the original designs on it, and the PDF also includes text specially typeset in different typefaces and a wide range of unicode glyphs.

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

It is also important to generate this text onto the PDF from a webpage as each text generated will be slightly different, creating a unique PDF for the end user.

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

I have been researching this topic online and have found the jsPDF library, but that seems to only generate PDFs, not write on top of existing PDFs, and the content I need on the PDF is too complex to use jsPDF to generate it all. I do not want to use the existing PDF as a background image if I do not have to.

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

I also found some backend libraries like PDFKit but would like to avoid using a backend library if at all possible —?and it also doesn't seem to write over existing PDFs.

我还发现了一些像 PDFKit 这样的后端库,但希望尽可能避免使用后端库——而且它似乎也没有覆盖现有的 PDF。

I saw some things about text-fields online, but had trouble making sense of if this would be a feasible path to take —?could it be possible to add text fields in the PDF and then insert text into those fields from a webpage before the user downloads it?

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

Thank you very much.

非常感谢你。

回答by G?khan Kurt

I guess you can convert your PDF file to html or at least draw it on a canvas at this point. If you can, you can use jsPDFto add overlay html on top of existing html to generate a new PDF file.

我猜你现在可以将你的 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>

回答by philip oghenerobo balogun

Found this solution. Sorry, but it does involve doing some work on the server side. :)

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

It involves

它涉及

  1. Convert pdf to html using pdf2htmlEX.

  2. Manipulate the html however you need to. You could probably use cheeriofor easier dom manipulation.

  3. Convert the html back to a pdf using something like jspdf.

  1. 使用pdf2htmlEX将 pdf 转换为 html 。

  2. 根据需要操作 html。您可能可以使用cheerio来更轻松地进行dom 操作。

  3. 使用jspdf 之类的东西将 html 转换回 pdf 。

More about it here.

更多关于它在这里

回答by tomysshadow

PDFs are read only, so once they're created they cannot be edited, only read. There is no way to do this via any program never mind Javascript, other than generating the pdf completely over from scratch using the same steps used to create the first one.

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