🍫 前言
- 需求如下：根据 docx 模板形成页面，让用户直接填写相关信息，在线生成 PDF 文件，无需用户下载 docx 模板填完信息再转为 PDF。
- 填写信息包括普通文本、上传图片、在线电子签名。
1.方案确定
- 文本和图片直接生成 PDF 可能有中文乱码、样式错乱等问题。
- 所以考虑直接生成 PDF 内容的图片，再用插件把图片放到 PDF 文件里面，触发下载保存。
- 如果直接将用户填写上传的区域生成 canvas，会把边框、虚线、按钮等提升用户体验的样式也一起生成。
- 所以需要把用户输入的信息提取出来，额外按照 docx 模板渲染纯 html 片段，即上传区域直接显示上传后的图片，输入框直接显示输入的文本，电子签名区域直接显示生成的签名图片。
- 使用 JQuery 配合以下插件实现。
- 插件官网：
原创大约 8 分钟