这里讲一种实现起来比较简单的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：浏览器要是现代浏览器哈。
参考资料
html2canvas : http://html2canvas.hertzen.com/ jspdf :https://github.com/MrRio/jsPDF
