js生成pdf初探

前段时间，客户提了个需求，想把订单合同作成线上签名并在线生成合同，生成的合同还要打印出来，还要我两天作完，WTF,接到需求的那一刻我是懵逼的，我只是个瑟瑟发抖的小前端啊，话说这也须要研究一下怎么作的吧。

瑟瑟发抖之余，我就在考虑具体实现的步骤，简单划分了下 --->

1. 用canvas实现手写签名
2. 将签名展现在合同上
3. 提交合同的同时生成pdf(合同内容+签名)
4. 将生成的合同保存到服务端

看完是否是以为很简单，不用两天，给我三五个小时就搞定了。事实证实我仍是太年轻了，我google了几个案例后，发现最佳实现方案是用signature_pad实现签名,而后用（html2canvas+jsPdf）生成pdf文档。
因而我便开始动手写demo,签名没啥问题，我以前本身也写过canvas实现写字，可是懒得再去重构项目和作模块化扩展。html2canvas也没问题，用网页生成的图片文件很清晰，还原度很高，至于生成pdf嘛，效果就通常了。

主要问题是以下：

1. 生成的pdf及其不清晰，
2. 分页打印的位置裁切也存在问题
3. 手机端展现的合同的dom结构布局和打印的A4纸上的布局有很大不一样

我也尝试过多种方案，依旧没能解决，期间想过用一个隐藏dom来写一套A4纸的样式用于打印，后来发现清晰度和裁剪问题很差解决,因而便换了种思路，想经过服务端来解决。
在github上逛了逛，发现了pdfmake这个神器，立马看了文档，开始写demo，实践了一遍后发现，这个比较靠谱，生成的文档也很清晰。

具体能实现的以下：

• 自定义样式（字体，颜色，下划线，对齐方式，边距）
• 插入图片
• 定位（相对定位，绝对定位）
• 水印，页眉页脚

这些就够了，但是还存在一些问题（不知道是否是打开的方式不对）

• 对中文的支持不好，目前只能用微软雅黑
• 原始文档须要本身手动去设置，固然也可使用js去生成

最终我仍是用这个插件实现了想要的效果。
项目上线后，我本身撸了个demo,放在github上，有兴趣的能够下载下来看一看

//项目结构
├── README.md
├── app
│   ├── fonts
│   │   └── msyh.ttf  //字体文件
│   ├── images
│   │   ├── qrcode.png //用到的图片
│   │   └── snh.jpg  
│   ├── middleware
│   │   └── generatePdf.middleware.js //生成文档js
│   ├── models
│   │   └── doc.model.js //文档原型
│   └── routers
│       └── index.js //路由文件
├── app.js  
├── package.json
└── tempFiles  //缓存目录

效果截图（截图效果太渣，文档很清晰，打印彻底没问题）

有须要的能够自取

git clone https://github.com/zangse/GeneratePDF

npm install 

npm run start

在浏览器打开

http://localhost:3000/pdf

这个pdfmake也能够在浏览器端实现，鉴于须要加载的字体太大（微软雅黑.ttf ---> 10M+），我放弃了这个操做。