这里讲一种实现起来比较简单的html转pdf下载的实现 。
依赖插件
html2canvas jspdf思路
通过html2canvas，我们可以将指定的一个dom元素，渲染到canvas中 ， 然后从canva中获得该图片，并将图片通过jspdf来生成 。代码
function createPdf (selector,pagesize,direction,title){var key = pagesize'' direction;var settings = {'00' : {pdf : {orientation : 'portrait',format : 'a4',unit : 'px'},width : 448,height : 632.5},'01' : {pdf : {orientation : 'landscape',format : 'a4',unit : 'px'},width : 632.5,height : 448},'10' : {pdf : {orientation : 'portrait',format : 'a3',unit : 'px'},width : 632.5,height : 894.2},'11' : {pdf : {orientation : 'landscape',format : 'a3',unit : 'px'},width : 894.2,height : 632.5}};var set = settings[key];var doc = new jsPDF(set.pdf);var arr = [];//根据顺序保存var $arr = $(selector);function tempCreate(){if($arr.length == 0){//没有啦//执行生成tempPdf();}else{var $dom = $arr.splice(0,1);html2canvas($dom[0]).then(canvas => {var dataurl = canvas.toDataURL('image/png');arr.push(dataurl);tempCreate();});}}function tempPdf(){arr.forEach((item,i)=>{if(i !== 0){doc.addPage();}doc.addImage(item,'png',-1,-1,set.width,set.height);//根据不同的宽高写入})//根据当前的作业名称doc.save(title '.pdf');}tempCreate();}需要指定容器(依赖jquery),然后指定纸张A4或 A3 ， 以及横纵向 。
//调用createPdf('.single-page',0,0,'test')当然 ， 如果是数据量很大的话，就不建议在前台生成了，最好还是放在后端去做 。个人测试过，做A4的图片生成PDF，当数量大约在100左右的时候，浏览器就崩溃了，如果只是几页的数据的话，这个方式还是很方便的 。
Ps：浏览器要是现代浏览器哈 。