简体   繁体   English

使用Javascript从模板生成PDF

[英]Generate PDF from Template using Javascript

The situation is the following: We have a website, that generates (large) contract-JSONs which we now want to export as pdfs using the frontend, so javascript. 情况如下:我们有一个网站,该网站生成(大型)合同JSON,现在我们希望使用前端(即javascript)将其导出为pdf。 At the moment, I use pdfmake but i find it very hard to get a layout that stays the same for every contract. 目前,我使用pdfmake,但我发现很难获得每个合同都相同的布局。 I would prefer to have some kind of template which i could fill with the values from the JSON. 我希望有某种模板,可以用JSON中的值填充。

Best I can think of at the moment would be to write a pdf template with LaTex and fill it with some template framework and compile it with a LaTex compiler. 目前,我能想到的最好的方法是使用LaTex编写pdf模板,并用一些模板框架填充它,然后使用LaTex编译器进行编译。 However I hope there is something simpler you could tell me. 但是,我希望您能告诉我一些简单的事情。 It's only important, to get from JSON to the pdf in one click. 一键从JSON到pdf,这很重要。

I have done some research for a similar scenario. 我已经针对类似情况进行了一些研究。 Below are three options that i shortlisted : 以下是我列出的三个选项:

  1. HTML-PDF (nodejs module) HTML-PDF(nodejs模块)
  2. WKTHMLTOPDF WKTHMLTOPDF
  3. PhantomJS (even the first two options uses phantomjs) PhantomJS(甚至前两个选项也使用phantomjs)
  4. jsPDF - can be used at client side jsPDF-可以在客户端使用

I ended up, using pdfmake. 我最终使用pdfmake。 First I understood it wrong, which was the cause for me not being able to edit a pdf. 首先,我理解错了,这是导致我无法编辑pdf的原因。 Now I know, that you can layout your document nicely by using lots of columns. 现在我知道,您可以使用很多列来很好地布局文档。

I tried to read a .tex file and fill it using FreeMarker. 我试图读取.tex文件,并使用FreeMarker填充它。 This worked very well, however not having an online LaTeX compiler, i would have had to force customers to compile the .tex files locally which i did not want. 这工作得很好,但是没有在线LaTeX编译器,我不得不强迫客户在不需要的本地编译.tex文件。

However, if you have a LaTeX compiler locally, this should work. 但是,如果您在本地拥有LaTeX编译器,则应该可以使用。

After having this solution running for some time, I want to add that changing the document afterwards (add a table for example) is pretty tough in this scenario. 在使该解决方案运行了一段时间之后,我想补充一点,在这种情况下,事后更改文档(例如添加表)是非常困难的。 If I'd have to do it again, I'd probably try to implement the building blocks of the pdf as latex-templates with placeholders. 如果必须再次执行此操作,则可能会尝试将pdf的构建块实现为带有占位符的乳胶模板。 Like directives in angular. 像角度指令。 In the document building process I would go through template by template, generate the Latex-Blocks (like tables) using the data I received from the backend and I'd use FreeMarker to fill the generated data into the templates and afterwards put the templates into one complete latex file, holding the whole pdf in latex. 在文档构建过程中,我将逐个模板浏览模板,使用从后端接收的数据生成Latex-Blocks(如表格),然后使用FreeMarker将生成的数据填充到模板中,然后将模板放入一个完整的乳胶文件,将整个pdf保留在乳胶中。 Using a js-Latex compiler like texlive, I should be able to generate the pdf from this file. 使用像texlive这样的js-Latex编译器,我应该能够从该文件生成pdf。

All of this is in theory and probably more work than what I did, but I like this solution better, since it's cleaner and easier to maintain. 从理论上讲,所有这些工作都可能比我做的工作还要多,但是我更喜欢此解决方案,因为它更干净,更易于维护。 Learn from my mistakes :-) 从我的错误中学习:-)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM