⽤html2canvas导出PDF
直接导出清晰度太差了，
这边做个记录，需要吧要导出的div容器背景⾊这只成⽩⾊，要不没有内容的部分会变成⿊⾊
function download(){
var element =$("#content");// 这个dom元素是要导出pdf的div容器
var w = element.width();// 获得该容器的宽
var h = element.height();// 获得该容器的⾼
var offsetTop = element.offset().top;// 获得该容器到⽂档顶部的距离
var offsetLeft = element.offset().left;// 获得该容器到⽂档最左的距离
var canvas = ateElement("canvas");
var abs =0;
var win_i =$(window).width();// 获得当前可视窗⼝的宽度（不包含滚动条）
var win_o = window.innerWidth;// 获得当前窗⼝的宽度（包含滚动条）
if(win_o > win_i){
abs =(win_o - win_i)/2;// 获得滚动条长度的⼀半
}
canvas.width = w *2;// 将画布宽&&⾼放⼤两倍
canvas.height = h *2;
var context = Context("2d");
context.scale(2,2);
// 这⾥默认横向没有滚动条的情况，因为offset.left()，有⽆滚动条的时候存在差值，因此
/
/ translate的时候，要把这个差值去掉
html2canvas(element).then(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;
//页⾯偏移element表格横向滚动条
var position =0;
//a4纸的尺⼨[595.28,841.89]，html页⾯⽣成的canvas在pdf中图⽚的宽⾼
var imgWidth =595.28;
var imgHeight =592.28/ contentWidth * contentHeight;
var pageData = DataURL('image/jpeg',1.0);
var pdf =new jsPDF('','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.save('1.pdf');
})
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。