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+），我放棄了這個操做。