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

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

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

在前端用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：


<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>测试PDF导出</title><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><scriptsrc="js/html2canvas.min.js"></script><scriptsrc="js/jspdf.min.js"></script><style>html,body{margin:0;padding:0;}#pageul{padding:0;list-style:none;}#pageli{line-height:110px;color:#fff;padding-left:10px;}.c0{background-color:#ea644a;}.c1{background-color:#f1a325;}.c2{background-color:#38b03f;}.c3{background-color:#03b8cf;}.c4{background-color:#bd7b46;}.c5{background-color:#8666b8;}</style><script>functionexportPdf(){varelement=document.getElementById("page");html2canvas(element,{logging:false}).then(function(canvas){varpdf=newjsPDF('p','mm','a4');//A4纸，纵向varctx=canvas.getContext('2d'),a4w=190,a4h=277,//A4大小，210mmx297mm，四边各保留10mm的边距，显示区域190x277imgHeight=Math.floor(a4h*canvas.width/a4w),//按A4显示比例换算一页图像的像素高度renderedHeight=0;while(renderedHeight<canvas.height){varpage=document.createElement("canvas");page.width=canvas.width;page.height=Math.min(imgHeight,canvas.height-renderedHeight);//可能内容不足一页//用getImageData剪裁指定区域，并画到前面创建的canvas对象中page.getContext('2d').putImageData(ctx.getImageData(0,renderedHeight,canvas.width,Math.min(imgHeight,canvas.height-renderedHeight)),0,0);pdf.addImage(page.toDataURL('image/jpeg',1.0),'JPEG',10,10,a4w,Math.min(a4h,a4w*page.height/page.width));//添加图像到页面，保留10mm边距renderedHeight+=imgHeight;if(renderedHeight<canvas.height)pdf.addPage();//如果后面还有内容，添加一个空页deletepage;}pdf.save('content.pdf');});}functiongenerateData(){varhtml=[];html[html.length]='<ul>';for(vari=0;i<20;++i){html[html.length]='<liclass="c';html[html.length]=i%6;html[html.length]='">这是第';html[html.length]=i;html[html.length]='行</li>';}html[html.length]='</ul>';document.getElementById('page').innerHTML=html.join('');}</script></head><bodyonload="generateData()"><buttononclick="exportPdf()">导出pdf</button><divid="page"></div></body></html>


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