1.需要引入的js文件:
html2canvas.js、 jsPdf.debug.js、 jquery.js
2.实现代码:
方式一:
function exportPdf(){
html2canvas($('#main'), { //选择要导出的页面id样式
height:2000,
onrendered: function(canvas) {
var imgData = canvas.toDataURL('img/notice/png');
var doc = new jsPDF('p', 'px','a4');
//第一列 左右边距 第二列上下边距 第三列是图片左右拉伸 第四列 图片上下拉伸
doc.addImage(imgData, 'PNG', 2,30,0,0);
doc.save($("#tt").html()+".pdf");
}
});
}
方式二:
导出为横向pdf
function exportPdf(){
var target = document.getElementById("taotaisai");//要转化页面内容的id
target.style.background = "#FFFFFF";
html2canvas(target, {
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;
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
var imgWidth = 841.89;
var imgHeight = 841.89/contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new jsPDF('l', 'pt', 'a4'); //l:横向 p:纵向
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(595.28)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 26, 43, imgWidth, imgHeight );
} else {
while(leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 595.28;
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save("女单对阵图.pdf");
}
});
}