//绑定预览文件
$("#preview").click(function(){
//获取要预览的dom
var target = $("#page1");
//预览页面默认为黑背景,手动设置背景为白色。
$("#page1").css("background-color","#FFFFFF") ;
//通过获取html,转为canvas画布,然后将canvas转换为pdf
html2canvas(target, {
onrendered:function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
//一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 841.89* 592.28; // 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('s', '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 -= 592.28;
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage();
}
}
}
//pdf.save('datauri',name);//直接下载当前的pdf
// pdf.output('datauri');//直接在当前页面输出预览
//pdf.output('dataurlnewwindow');//打开新标签页预览,但是无显示
//document.getElementById("iframe123").src = pdf.output('datauristring');//动态替换当前页中的iframe
//当前页弹窗显示
top.layer.open({
type: 2,
area: ["1200px", "800px"],
title: "showpdf",
auto:false,
maxmin: true, //开启最大化最小化按钮
content: pdf.output('datauristring'),
btn: ['close'],
cancel: function(index){
}
});
}
});
});