html转PDF 尺寸换算,jspdf + html2canvas 实现html转pdf (提升分辨率版本)

刚解决了html中某div块生成pdf的问题，热乎乎的，赶忙记录下css

引入的js传送门：html

https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js

https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js

踩坑记录：git

1.生成的pdf中，dom元素间距异常；

2.提升分辨率后，生成的图片有误差

html语句：github

下载pdf的点击方法：ajax

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 = document.createElement("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 = canvas.getContext("2d");

context.scale(2, 2);

context.translate(-offsetLeft-abs,-offsetTop);

// 这里默认横向没有滚动条的状况，由于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;

//页面偏移

var position = 0;

//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

var imgWidth = 595.28;

var imgHeight = 592.28/contentWidth * contentHeight;

var pageData = canvas.toDataURL('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');

})

}

原本想着偷懒，而后没过审。用这个方法生成的pdf有个问题还挺大的，就是生成的文件(尤为是增大了分辨率之后)都是大几百k的，稍微有点内容的基本就将近1mb了。暂时还未找到解决的方式。日后找到了会补上canvas

8.13更新：html2canvas(demo).then.. => 改成 html2canvas(element).then...

还有一个就是转换的容器背景颜色最好设为白色，否则生成的pdf的空白区域默认是黑色的，写了可行的demo，等等上来贴地址dom