Javascript实现html转pdf⾼清版（提⾼分辨率）
⽹上⼀些关于js实现html转pdf的⽂章⼤部分最终转成的PDF都不够清晰，今天为⼤家介绍如何提⾼js实现html转pdf的清晰度引⼊js⽂件
注意事项：
1.⽣成的pdf中，dom元素间距异常；
2.提⾼分辨率后，⽣成的图⽚有偏差；
html语句：
<div id="demo">
...
</div>
JS代码：
download(){
var element = $("#demo"); // 这个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⾼度;
html代码转链接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 = 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('我的简历.pdf');
})
}
更多关于Javascript将html转成pdf的⽂章请⼤家点击下⾯的相关链接

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