html2canvas jsPdf.debug

<div id="downloadBtn">

<a href="javascript:;" class="btn btn-wh btn-primary fr" id="renderPdf">下载报告</a>

</div>

<script type="text/javascript" src="/resource/js/html2canvas.js"></script>

<script type="text/javascript" src="/resource/js/jsPdf.debug.js"></script>

<script type="text/javascript">

var ele = document.getElementById("reportInfo");

 

ele.style.backgroundColor = "#fff";

var downPdf = document.getElementById("renderPdf");

downPdf.onclick = function() {

html2canvas(ele, {

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 = 0;

var imgWidth = 595.28;

var imgHeight = 592.28/contentWidth * contentHeight;

 

var divHeight = document.getElementById("report-right").offsetHeight;

console.info(divHeight);

//返回图片URL，参数：图片格式和清晰度(0-1)

var pageData = canvas.toDataURL('image/jpeg', 1.0);

//方向默认竖直，尺寸ponits，格式a4【595.28,841.89]

// var pdf = new jsPDF('', 'pt',[595.28,divHeight * 400 /[(8.27 - 0.75 * 2) * 96]]);

var pdf = new jsPDF('', 'pt', 'a4');

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();

}

}

}

// //需要dataUrl格式

// pdf.addImage(pageData, 'JPEG', 0, 0, 592.28, 592.28/canvas.width * canvas.height );

 

pdf.save('content.pdf');

}

})

}

</script>