前言

• 需求如下：根据 docx 模板形成页面，让用户直接填写相关信息，在线生成 PDF 文件，无需用户下载 docx 模板填完信息再转为 PDF。
• 填写信息包括普通文本、上传图片、在线电子签名。

方案确定

• 文本和图片直接生成 PDF 可能有中文乱码、样式错乱等问题。
  • 所以考虑直接生成 PDF 内容的图片，再用插件把图片放到 PDF 文件里面，触发下载保存。
• 如果直接将用户填写上传的区域生成 canvas，会把边框、虚线、按钮等提升用户体验的样式也一起生成。
  • 所以需要把用户输入的信息提取出来，额外按照 docx 模板渲染纯 html 片段，即上传区域直接显示上传后的图片，输入框直接显示输入的文本，电子签名区域直接显示生成的签名图片。
• 使用 JQuery 配合以下插件实现。
  • Dropzone
  • jSignature
  • html2canvas
  • jsPDF
• 插件官网：
  • Dropzone
  • jSignature
  • html2canvas
  • jsPDF

个人主页

https://yuziikuko.gitee.io/articles/00.html

在线尝试

CodeSandbox

仓库地址

• Gitee: https://gitee.com/yuziikuko/msg_to_pdf.git
• GitHub: https://github.com/yuziikuko/Msg_to_PDF.git

效果预览

（一）基础页面结构

JQuery插件秀：生成PDF文件（文本+上传图片+电子签名）相关推荐

1. 解决部分浏览器不能显示itext生成的PDF文件文本域内容问题

   解决部分浏览器不能显示itext生成的PDF文件文本域内容问题 参考文章: (1)解决部分浏览器不能显示itext生成的PDF文件文本域内容问题 (2)https://www.cnblogs.com/ ...

2. 前端生成PDF 文件教程+在线demo案例

   个人博客导航页(点击右侧链接即可打开个人博客):大牛带你入门技术栈 PDF 简介 PDF 全称Portable Document Format (PDF)(便携文档格式),该格式的显示与操作系统.分辨 ...

3. freemarker+itext生成PDF文件

   介绍 FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页.电子邮件.配置文件.源代码等)的通用工具. 它不是面向最终用户的,而是一个Java类库,是 ...

4. Android使用iText7生成PDF文件

   一:添加依赖 implementation 'com.itextpdf:itext7-core:7.1.13' 二:清单文件AndroidManifest.xml 添加权限 <uses-perm ...

5. 通过前端实现导出生成pdf文件并下载

   通过前端实现导出生成pdf文件并下载 使用 jspdf.js + html2canvas 插件,实现前端生成pdf 并下载的功能 步骤如下 1.先通过npm 安装插件 npm install jspd ...

6. php生成pdf文件,html转pdf文件的最佳方法（转载）

   之前有个客户需要把一些html页面生成pdf文件,然后我就找一些用PHP把html页面围成pdf文件的类.方法是可谓是找了很多很多,什么html2pdf,pdflib,FPDF这些都试过了,但是都没有 ...

7. php输出PDF的文件流_怎么用PHP在HTML中生成PDF文件

   译文:使用PHP在html中生成PDF 译者:dwqs 利用PHP编码生成PDF文件是一个非常耗时的工作.在早期,开发者使用PHP并借助FPDF来生成PDF文件.但是如今,已经有很多函数库可以使用了, ...

8. itextpdf添加表格元素_itext生成pdf文件-表格

   生成pdf常用的插件有iReport.和itext,这里将使用itext生成pdf文件. 多于的话不说直接上demo和需要的jar,如果pdf中有图片要画的话可以用jfreeChart画. packa ...

9. 记-ItextPDF+freemaker 生成PDF文件---导致服务宕机

   摘要:已经上线的项目,出现服务挂掉的情况. 介绍:该服务是专门做打印的,业务需求是生成PDF文件进行页面预览,主要是使用ItextPDF+freemaker技术生成一系列PDF文件,其中生成流程有:解 ...

最新文章

1. Golang中Buffer高效拼接字符串以及自定义线程安全Buffer
2. 微信小程序：获取地理定位和显示相应的城市名称。
3. 学java的困惑_学习Java - 关于一些代码困惑
4. ionic3使用第三方图标
5. L1-041 寻找250-PAT团体程序设计天梯赛GPLT
6. 面向对象 —— 类设计（十二）—— 全局变量和成员变量
7. 源码文件编码问题，导致编译的程序运行错误
8. qt 读取mysql数据库_qt 读取mysql数据库
9. 实用新型专利撰写模板（自己总结）
10. Appium Desktop下载
11. Git 撤销放弃本地修改
12. 基于Java SpringBoot的电影院管理系统设计与实现毕业设计源码011633
13. 计算机保研-中科院计算所霸面（笔试面试）
14. 中央电大 c语言程序设计a 试题,中央电大2008年秋C语言程序设计A试题1
15. excel股票今日走势计算机,有没有可以在excel上自动显示股票实时数据的方法
16. maven（视频学习）
17. 六大银行办理大额信用卡及养卡细则
18. onsubmit表单提交简单使用
19. led灯什么牌子的质量好又耐用？2022性价比高的led护眼灯品牌推荐
20. 关于CSS选择器优先级的规则说明

热门文章

1. Asp.net MVC中ViewData与ViewBag的使用方法(改)
2. Signal prediction based on boosting and decision stump
3. Nacos 报错：Request cannot be executed； I/O reactor status: STOPPED
4. VHDL数据取反操作
5. SEO公司，是时候停止割韭菜了！
6. 减肥是最值得学习的割韭菜手法
7. C#编写大计算量程序总是报内存溢出System.OutOfMemoryException的重要原因
8. 【分享】我们结婚吧——十二星座求爱大全
9. 美国国家公园瀑布下现彩虹奇观
10. vue fullCalendar的使用及扩展（支持农历显示及鼠标右键新建）