前段时间，客户提了一个需求，想把订单合同做成在线签名，在线生成合同。生成的合同需要打印出来，我需要在两天内完成。在需求的那一刻，我一头雾水。我只是一个颤抖的小前端。换句话说，我还需要研究如何去做。一边打哆嗦一边想着具体的实现步骤，干脆分了--->用canvas实现手写签名，在合同上显示签名并在生成pdf（合同内容+签名）的同时提交合同并保存生成contract在服务器上看完了，是不是觉得很简单，不用两天，给我三五个小时搞定。事实证明，我还是太年轻了。google了几个案例后，发现最好的实现方案是使用signature_pad实现签名，然后使用（html2canvas+jsPdf）生成pdf文档。于是开始手写demo。签名没有问题。之前写过canvas来实现写，但是懒得重构项目，做模块化扩展。html2canvas没有问题。网页生成的图片文件非常清晰，还原度高。至于生成pdf，效果一般。主要问题如下：生成的pdf不清晰，分页打印位置的裁剪也有问题。合约在移动端显示的dom结构布局与打印出来的A4纸上的布局差别很大。我也尝试过各种解决方案，还是解决不了。期间想到了用一个hiddendom写了一套A4纸的样式用于打印。后来发现清晰度和裁剪问题不好解决，于是改主意，想通过服务端来解决。在github上浏览了一下，发现了神器pdfmake。我立即阅读文档并开始编写演示。实践了一下，发现这样比较靠谱，生成的文档也很清楚。具体可以这样实现：自定义样式（字体、颜色、下划线、对齐方式、边距）插入图片定位（相对定位、绝对定位）水印、页眉页脚就够了，但还是有些问题（不是我不不知道是不是打开方式不对）对中文的支持很差。目前我只能使用微软雅黑的原版文档，需要手动设置。当然我也可以用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//缓存目录效果截图（截图效果太草率了，文档很清晰，打印完全没问题）。如果你需要它，你可以自己去拿。gitclonehttps://github.com/zangse/GeneratePDFnpminstallnpmrunstart正在浏览用浏览器打开http://localhost:3000/pdf。这个pdfmake也可以在浏览器端实现。鉴于要加载的字体太大（MicrosoftYahei.ttf--->10M+），我放弃了这个操作。
