纯js实现页面html导出pdf（一）

    页面导出pdf，因为我的页面是动态生成且样式是不固定的，故采用这种方式将html页面导出pdf格式，可以实现分页

	  	function $exportReportTemplet()	{
	  			    // 将 id 为preview_container 的 div 渲染成 canvas
	  			    html2canvas(document.getElementById("preview_container"), {
	  			        // 渲染完成时调用，获得 canvas
	  			        onrendered: function(canvas) {
	  			            var contentWidth = canvas.width;
	 			            var contentHeight = canvas.height;
	  			        	
	 			            //一页pdf显示html页面生成的canvas高度;
				            var pageHeight = contentWidth / 592.28 * 841.89;
				            //未生成pdf的html页面高度
				            var leftHeight = contentHeight;
				            //页面偏移
				            var position = 50;
				            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
				            var imgWidth = 595.28;
				            var imgHeight = 592.28/contentWidth * contentHeight;
	  			            // 从 canvas 提取图片数据
	  			            var pageData = canvas.toDataURL('image/jpeg', 1.0);
	　　　　　　　
	  			            //初始化pdf，设置相应格式（单位为pt,导出a4纸的大小）
	  	 		            var pdf = new jsPDF("p", "pt", "a4");

	  			            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
				            //当内容未超过pdf一页显示的范围，无需分页
				            if (leftHeight < pageHeight) {
				            	pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
				            } else {
				                while(leftHeight > 0) {
				                    pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
				                    leftHeight -= pageHeight;
				                    position -= 841.89;
				                    //避免添加空白页
				                    if(leftHeight > 0) {
				                      pdf.addPage();
				                    }
				                }
				            }
	  			            //输出保存命名的pdf
	  			            pdf.save('pdf_' + new Date().getTime() + '.pdf');
	  			        },
	  			　　　　　// 导出的pdf默认背景颜色为黑色，所以要设置颜色为白
	  			        background: '#FFF'
	  			    });
	  				
	  			}