用户填写表单，点击保存之后，可以直接下载pdf文档。

 

　　谷歌浏览器在17年自行开发了Chrome Headless特性，并与之同时推出了 puppeteer，它可以被理解为是无界面但是可以完成服务器功能特性的浏览器。

 

　　所以我们可以在服务端启动puppeteer浏览器，打开目标网址，使用chrome浏览器自带的转换功能进行html到pdf的转换。

 

　　首先要安装puppeteer，npm安装可能会出错，最好使用cnpm淘宝镜像安装。

 

　　输入安装依赖。

 

　　创建一个js文件，只需要用puppeteer浏览器打开网址，保存pdf即可。

 

　　然后控制台输入启动服务。

 

　　当然也可以module.export将模块方法导出，根据业务逻辑来。

 

　　无法保存表单动态数据

 

　　由于是从服务端请求页面，如果不在请求地址上保存用户输入，截出来的pdf将是页面没被填写的初始状态。

 

　　换而言之，他只能进行静态页面的转换，因为我们的需求有大量用户输入，因此pass。

 

　　使用，输入需要转换的dom节点，遍历转换成canvas画布

 

　　将canvas画布转成base64图片，使用创建pdf文件，把图片插入进pdf。

 

　　失真。

 

　　我们可以很明显的发现，既然是类似于对页面截图再将截图插入pdf，页面的分辨率和配置很可能影响输出图片的质量。

 

　　同时，因为是截图，可能失去页面链接等功能。

 

　　文字截断

 

　　当canvas画布大于pdf一页大小时，输出就会出错，这时我们需要判断canvas画布是否超出A4大小，如果超出，对canvas进行分割，插入到不同的页面。

 

　　这时候问题又来了，既然是分割图片，那么很可能导致图片或者文字从一半就被截断，因为我们无法分析canvas内部item的结构。

 

　　我们的需求没有图片和链接，所以失真的问题对我们影响不大，同时我们的表单由多个重复等长的item组成，并且这些item都非常短，不会超出一张A4纸（虽然这样不严谨，如果需要，你可以获取DOM元素宽高，根据DOM元素高度裁剪）。

 

　　所以我打算直接根据item切分canvas，每个item给一页A4纸保存。

 

　　在开始之前需要理解几个核心方法：

 

　　html2canvas

 

　　jsPDF

 

　　canvas

 

　　表单保存后的页面

 

　　转换成pdf的效果