jsPDF：将HTML元素转换为同等宽高的PDF

需求：在前端将HTML元素导出为PDF。

需要的插件：jsPDF.js，html2canvas.js。

实现：

HTML是流程图，所以宽度和高度不固定。经历种种测试之后发现，在jsPDF新建pdf时，将PDF页面直接设置为HTML的宽度和高度即可。

新建FDF文件代码如下：

//导出pdf
function exportPDF() {
	//得到要导出pdf的html根节点  
	var chartCenter = document.getElementById("right").outerHTML;
	var fbody = openWithIframe(chartCenter);//增加IFrame元素，用来排除干扰元素（这个方法没有贴出来）
	svg2canvas(fbody);//将svg转换为canvas（这个方法没有贴出来）

	var canvas = document.createElement('canvas');
	canvas.width = parseFloat(document.getElementById("right").scrollWidth);//获取滚动条长
	canvas.height = parseFloat(document.getElementById("right").scrollHeight);//获取滚动条宽

	//html2canvas官网的标准方法
	html2canvas(fbody, {
	    canvas:canvas,
		onrendered: function(canvas) {			
			//将图片转换成：base64编码的jpg图片。
			var imgData = canvas.toDataURL();
			var canWidth = canvas.width;
			var canHeight = canvas.height;
			var arrDPI = js_getDPI();//获取显示器DPI（这个方法没贴出来）
			var dpiX = 96;
			var dpiY = 96;
			if(arrDPI.length>0){
				dpiX = arrDPI[0];
				dpiY = arrDPI[1];
			}
			//l:横向， p：纵向；单位： in:英寸，mm毫米；画布大小：a3,a4,leter,[]（当内容为数组时，为自定义大小）
			var doc = new jsPDF('l', 'in', [(canWidth+10)/dpiX,(canHeight+10)/dpiY]);//设置PDF宽高为要显示的元素的宽高，将像素转化为英寸
			doc.addImage(imgData, 'png', 7/dpiX,5/dpiY); //写入位置：x:5, y:5 单位:英寸
			$('#myFrmame').remove(); //最后将iframe删除
			doc.save('test.pdf');
		},	
		background: "#FFFFFF", //这里给生成的图片默认背景，不然的话，如果html根节点没有设置背景的话，会用黑色填充。
	    taintTest: false,
		allowTaint: true //避免一些不识别的图片干扰，默认为false，遇到不识别的图片干扰则会停止处理html2canvas
	});
};

在新建时灵活赋值给pdf宽高，即可实现HTML页面和PDF页面同等宽高。

PS:注意单位，jsPDF貌似不支持像素，所以需要将像素和英寸，毫米等进行转换。