页面直接导出为PDF文件，支持分页与页边距

将WEB页面直接导出为pdf文件是经常会用到的一个功能，尤其是各种报表系统。总结了一下目前几种主流的做法：

1. 在后端用代码生成pdf文件，比如iText一类；

2. 在后端抓取页面并生成pdf文件，比如phantomjs一类；

3. 在前端用js直接生成pdf文件；

方案3的优势在于前端直接生成，所见即所得。今天要探索的就是html2canvas和jspdf，前者用于将页面元素render生成canvas，后者用于将canvas生成pdf文档。需要注意的是，这种方法对IE系列支持不好。

 

html2canvas的主页：http://html2canvas.hertzen.com/

jspdf的主页：https://parall.ax/products/jspdf

 

两者的使用都比较简单，网上的文章很多，但是对于长网页导出，jspdf是不支持分页的，目前有一种做法是addImage时控制起始纵坐标为负值，然后超出页面底边的自动隐藏，就达到显示上的分页效果了，但这种方法无法给pdf页面留页边距，因此本文主要针对分页与页边距进行探索。

 

基本思路是对得到的canvas进行切割，按A4纸大小并留边距后的比例进行剪裁，切出一页一页的内容来，再分别加到pdf中。上个DEMO：

 1 
 2 
 3 
 4     
 5     
 6     
 7     
 8     
 9     
10     
21     
65 
66 
67     导出pdf
68     

69 
70 

 

核心的是exportPdf这个方法 ，感兴趣的同学可以参考。生成的pdf效果如图，可以看到分页和页边距效果：