根据需求需要对一个页面表格进行导出PDF格式的文档
- 如下图：
这里点击详情后，展示详细信息
主界面
点击详情后进入数据展示界面。这里用表格的方式显示，表格中的数据是后台传过来的数据。这里由于表格高度太高，所以使用了长截图的方式，正常情况下只能显示申报表的一半
申报表 -
接下来进行导出（这里用的是火狐浏览器打开）
导出的PDF
开始
- jsPDF原理：使用html2canvas遍历页面中的dom节点，渲染成canvas image，再用jsPDF把canvas image转化为pdf。简单来说，就像拍照一样，对页面进行拍照，然后将照片组合拼起来，再形成PDF。
第一步：引入jsPDF和html2canvas
https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js
https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js
第二步：指向需要导出的容器（我这里指的是报修申请单）
-
这里，我已将表格内容收缩起来了
image.png
第三步：点击事件
- 我这里使用的html + vue的方式，用不用vue对导出PDF没影响。
直接上代码！
// 导出PDF
exportPdf(){
var targetDom = $("#exportInfo");//你的目标元素id
var copyDom = targetDom.clone();
copyDom.width(targetDom.width() + "px");
copyDom.height(targetDom.height() + "px");
$('body').append(copyDom);
console.log('copyDom',copyDom)
html2canvas(copyDom, {
allowTaint: true,
taintTest: false,
scale: '2',
dpi: '192', // 设置导出分辨率
background: '#fff', // 设置背景颜色
onrendered:function(canvas) {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
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;
// position += 841.89;
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save('梧州学院仪器设备维修申报表.pdf');
copyDom.remove();
},
});
},
代码不多，需要的小伙伴直接copy就好了
解释与踩坑
解释：我这里使用的是先使用clone()方法，对原容器进行了复制，然后使用所复制出来的对象进行导出.
-
1、导出的PDF只有一半
也就是浏览器可视的界面，我们看到了多少，那么就导出了多少。由于jsPDF的原理的对页面进行拍照截图，有一种办法是点击导出后，返回页面顶部，即可完成。 -
2、导出背景色是黑色的
这里一定要设置背景色为白色 -
3、导出的PDF太模糊
在这里设置所导出的PDF分辨率就好了，如下图：
image.png
