Javascript基于模板生成PDF 文档
文档生成是开发人员生活中非常普遍的需求。无论是电子商务网站、管理应用程序还是其他任何东西。它可以是发票生成、保险文件准备、医生处方、人力资源报价生成、工资单生成，你可以想到大量的用例。总是需要生成文档。
从开发人员的角度来看，有几种常见的方法可以完成这项工作。
- 创建 HTML 元素并打印它们以生成文档
- 使用一些库来生成文档
- 让服务器处理基于静态模板的文档生成
这些方法对我没有帮助。客户希望自己定制他们的文件。我一直在寻找一种方法，发现eDocGen是一种单点解决方案。
与其他服务不同，eDocGen 提供了可以集成到我们应用程序中的 RestAPI。
在本文中，我们将讨论如何将 eDocGen 集成到我们的 js 应用程序中，以从各种数据格式（如 JSON/XML/Database 模式）生成文档。请免费试用以开始编码。
让我们潜入并编写代码。
出于演示目的，我创建了一个在 nodejs 上运行的示例 js 应用程序。
请按照以下步骤为我们设置编码游乐场。
用于npm init创建 package.json
添加axios, form-data, request,xhr2开发此应用程序所需的依赖项npm install axios form-data request xhr2
我们需要一个索引文件作为我们应用程序的起点。在根目录中创建一个 index.js 文件并修改 package.json 如下所示。
JSON
现在我们有一个基本的应用程序可以开始。这些步骤结束后，package.json 应该如下所示。
JSON
虽然这篇文章是关于文档生成的，但我们需要登录才能获取我们的访问令牌。这是一个典型的JWT令牌，将用于授权文档生成 API。
JavaScript
我们可以将令牌在应用程序中缓存一个小于过期时间的时间段，并使用它来生成文档或上传模板。到期时间过后，我们可以刷新令牌。缓存可以是 Redis 或内存缓存。这取决于您的应用程序设计。
如上所述，eDocGen 允许用户自定义和上传模板。但是如何动态映射数据呢？有一些将数据映射到文档的规则。我们将看到如何使用规则创建模板。
看看这个文件。
eDocGen{}对动态字段使用由 括起来的标签。我们可以动态添加文字、logo、表格、条件语句、数学计算等。
例如，在上图中，
字符串字段： {Invoice_Number}并{Invoice_Date}配置为替换为模板中的文本。模板中 {} 内的任何内容都将与输入数据匹配并替换。
动态表： 当表中存在需要循环和替换的数据数组时，动态表将是一个不错的选择。表中的行以 开头{#tablename}和结尾{/tablename}。在上面的示例中，发票表中的一行在第一列以 {#IT} 开头，在最后一列以 {/IT} 结尾。行中的列可以有字符串字段。在我们的示例中，{Item_description}并且{Amount}
图片： eDocGen 提供动态添加图片到模板的功能。请按照以下步骤操作。
- 将图像上传到应以 image_id 响应的 eDogGen。
- {%image_id}是用于填充图像的标签。图像image_id将从 eDocGen 存储中获取并替换为{%image_id}. 预计image_id将出现在输入数据中。
基于条件的动态字段（If-Else）：可以使用条件标签有条件地显示内容。例如，当语言为英语时，文档中会显示{#language == \”english\”} 英语内容。同样，单个文档模板可以支持多种语言。
数学计算： eDocGen 支持基于模板中定义的公式的数学计算。可以使用以下公式计算发票中项目金额的总和。
JSON
请前往JSON-to-pdf了解更多详情。
准备好模板后，就可以将其上传以供使用。有两种方法。
- eDocGen 的交互式 UI – 与 Dropbox、驱动器、Evernote 集成
- eDocGen 的 RestAPI – 可以集成到客户端代码中以上传模板。
对于演示，我使用 UI 来上传模板。成功上传后，我们会得到一个 ID 作为响应。这是将用于生成文档的 ID。
如果您希望使用 API，请在此处留下 Upload API 结构供您参考。
JSON
现在我们准备好了模板。让我们生成文档。
文档生成有两个阶段。
- 请求生成文档
- 下载文件
我们要求生成包含所需详细信息的文档，并得到确认。该过程异步发生在屏幕后面。
应用程序接口：POST-/api/v1/document/generate/bulk
表格数据
inputFile 中的数据应该是模板定义的结构。例如，对于上面的模板映射将如下所示。
- Invoice_Number在 JSON 中应该与{Invoice_Number}模板中的匹配。
- 对于表数据，它应该是一个对象数组，带有Item_Description和Amount.
- 金额应该是一个用于求和计算的数字。
可以使用从上述步骤中获得的输出 ID 和输出文件的名称下载生成的文档。
我们将在这里使用两个 API。
- 了解文件存在的 API：/api/v1/output/name/${fileName}
- 下载文件的API：/api/v1/output/download/${outputId}
由于文档生成是异步发生的，要知道文档是否生成，我们将使用/api/v1/output/nameapi。
来自 API 的成功响应/api/v1/output/name将下载文件。
我将这两个步骤组合在一个 js 文件中，如下所示。
爪哇
当数据为单个 JSON 时，将生成给定格式的单个文档。
当数据是对象数组时，将生成每个数组元素的文档并将其压缩到文件中。
XML 数据的过程很简单。我们需要做的就是传递 XML 文件来代替 JSON 数据。
就像JSON to document，XML to Document 我们也需要documentId, outputFileName, format and inputFile。除输入文件外，与 JSON 相同的所有内容都将是 XML 文件。
示例 XML 数据如下所示
XML
我为 XML 作为数据源所做的代码更改很简单，如下所示
JavaScript
从数据库生成文档几乎与其他数据源相同。但在这种情况下，我们需要提供连接详细信息和 SQL 查询，而不是上传 inputFile。
SQL 查询的输出列应与文档模板中的标签匹配。
让我们看看如何在代码中进行配置。
JavaScript
其他一切都将保持不变。
eDocGen 提供了通过电子邮件发送生成的文档的功能。
应用程序接口：POST-/api/v1/output/email
来自 eDocGen 的电子邮件如下所示
还有很多其他的功能我在这里无法涵盖。但我希望这篇文章可以为您提供一个从哪里开始的想法。
PDF.js Electron Viewer
PDF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库，由 Mozilla 主导开源。
本文旨在介绍 PDF.js 于 Electron 里如何开始使用，实际尝试了用其 API 或嵌入 HTML 的几种方式。
- 代码: https://github.com/ikuokuo/electron-pdf-viewer.git
项目采用 Electron React Antd PDF.js 来实现，以下是从零准备项目的过程。
这里用 electron-react-boilerplate[1] 模板开始 Electron React 项目。
准备编辑器（VSCode）：
其他编辑器，可见 Editor Configuration[2]。
添加 antd 依赖:
之后，就可以快速布局页面了，如下：
添加 pdfjs 依赖：
此外，准备 PDF 样例进 static/，简单用 Python 提供 HTTP 访问：
用于开发运行，正式运行可用 file:// 地址。
用 API 渲染页面，可见官方 Examples[3]。
1. 导入包
2. 渲染页面
完整代码，见 Pdfjs/index.tsx[4]。效果如下：
用 Viewer API 渲染，其在 pdfjs-dist/web/pdf_viewer 路径下。
1. 导入包
2. 布局页面
要求 absolute 定位：
3. 渲染 PDF
完整代码，见 PdfViewer/index.tsx[5]。效果如下：
PDF.js 提供了在线演示的 viewer.html，不过 pdfjs-dist 里没有，要自己编译其源码。
编译结果已放进 static/pdfjs/，可用 Electron Window 打开 web/viewer.html?file=x.pdf 或用 iframe 嵌入。
如果自己重新编译，过程如下：
iframe 嵌入的话，也是打开 web/viewer.html?file=x.pdf：
这里打开的 npm run static 提供的 HTTP 地址，效果如下：
iframe 要打开本地 HTML 试了下没成，如果想在 Electron + React 下这么用，还要研究下怎么弄。
PDF.js 可以说是 Web 渲染 PDF 的不二选择，很多 PDF Web Viewer 库都是基于它实现的。
GoCoding 个人实践的经验分享，可关注公众号！
[1] electron-react-boilerplate: https://electron-react-boilerplate.js.org/
[2] Editor Configuration: https://electron-react-boilerplate.js.org/docs/editor-configuration
[3] Examples: https://mozilla.github.io/pdf.js/examples/
[4] Pdfjs/index.tsx: https://github.com/ikuokuo/electron-pdf-viewer/blob/main/src/renderer/pages/Pdfjs/index.tsx
[5] PdfViewer/index.tsx: https://github.com/ikuokuo/electron-pdf-viewer/blob/main/src/renderer/pages/PdfViewer/index.tsx
细品pdf.js实践解决含水印、电子签章问题「Vue篇」
作者：jerryWu
转发连接：https://juejin.im/post/5ec48f84e51d45788266753a
项目涉及到移动端查看电子合同的问题，前前后后试了三种方案，真是一步一个坑，三种方案各有各的优点，不水，直接上代码，按照自己的需求选择。
直接使用vue-pdf插件，核心的代码是pdf.js，只不过就是自己封装了一下，优点是方便快捷，缺点是无法加载电子签章。
github地址： https://github.com/FranckFreiburger/vue-pdf
使用非常方便，尤其是只需要翻页，或者不需要翻页的，强烈推荐。
pdf-dist也是基于pdf.js的一个组件，只不过没有封装，需要自己配置，优点是可配置，可实现特殊的需求，缺点是需要自己封装，水印可加载，网上说可以加载电子签章，我的加载不出来，所以还是没采用。
一开始项目使用的是pdf-dist，因为后来电子签章显示不出来：
从网上搜了很多方法，说是需要修改pdf.work.js的源码，全局搜索AnnotationFlag.HIDDEN：
可能是移动端使用微信浏览器的原因，注释掉代码还是不好使，只能再想其他办法了
最后用了最笨的办法，直接从GitHub拉下来pdf.js的demo，用iframe标签包住demo里的HTML文件，直接套着用，完美解决电子签章的问题：
https://github.com/mozilla/pdf.js
下载下来以后放在public文件下（3.x脚手架）
只要能实现需求的代码就是好代码，我的项目是移动端查看PDF文件，因为文件上有电子签章，所以尝试了好几种方案，个人还是推荐第二种方案，如果没有电子签章的情况下。
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
作者：jerryWu
转发连接：https://juejin.im/post/5ec48f84e51d45788266753a
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
