通过html2canvas+jspdf将html页面生成PDF下载

这里讲一种实现起来比较简单的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 : undefined jspdf :undefined