写在前面: 为了不浪费你们的时间,预先说明:由于时间关系本次使用jquery2x.js+html2canvas +html2canvas.js+ jsPdf.debug.js 组成写在elementUI中,简单做一下文档总结
文件下载地址:https://download.csdn.net/download/qq_27751965/19476359
重点:需要导出节点的内容不能滚动,高度需auto
Html:
<!--点击按钮-->
<div style="position: fixed;right: 40px;top:40%;z-index: 4;cursor: pointer;display: none" id="exportToPdfBtn">
<el-button type="primary" plain size="mini" id="exportToPdf" ><i class="iconfont iconxiazai" style="font-size: 12px">导出为PDF</i></el-button>
</div>
<!--导出文本容器-->
<div id="pdfDom" >
<div id='part1'>...</div>
<div id='part2'>...</div>
<div id='part3'>...</div>
.......
</div>
Css:
/**
**主要说明容器得高度不能固定,要么会只打印它高度显示得部分
**/
#pdfDom {
padding: 15px;
background-color: #ffffff;
overflow-y: auto;
height:auto;
}
Js:
var that = this;
var downPdf = document.getElementById("exportToPdf");
downPdf.onclick = function() {
// 进行dom截图 必须让dom更新完再调用
Vue.nextTick(()=>{
var targetDom = $("#pdfDom");
// 设置 前三个部分各占一个页面 页面高度 = 当前宽度 + 30(页面15padding) / 552.28去掉canvas20padding * 打印高度
$('#part1').css('height', (targetDom.width() + 30) / 552.28 * 841.89)
$('#part2').css('height', (targetDom.width() + 30) / 552.28 * 841.89)
$('#part3').css('height', (targetDom.width() + 30) / 552.28 * 841.89)
$('#wellCon').scrollTop(0);
var copyDom = targetDom.clone();
copyDom.attr('id','content');
// copyDom.css('display','none');
copyDom.width(targetDom.width() + "px");
copyDom.height(targetDom.height() + "px");
$('body').append(copyDom)
html2canvas(targetDom, {
allowTaint: true,
useCORS: true,
// background:"#fff",
// dpi: 192,//导出pdf清晰度
// scale:2,
}).then((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 = 555.28;
var imgHeight = 555.28/contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
// 取消生成状态
this.isLoading = false
var pdf = new jsPDF('', 'pt', 'a4');
//有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围,无需分页
if (leftHeight < pageHeight) {
imgWidth = 555.28;
imgHeight = 555.28/contentWidth * contentHeight;
pdf.addImage(pageData, 'JPEG', 20, 20, imgWidth, imgHeight );
} else {
while(leftHeight > 0) {
leftHeight -= pageHeight;
pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
position -= 841.89;
//避免添加空白页
if(leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save(that.deptName + '-' + that.userInfo.user_name + '-' + that.endTime + '.pdf');
setTimeout(() => {window.close()},100)
// 保存pdf对象
})
})
}
说明:新增功能-------前三块内容设置单页显示(下载包没有,算法)
// 设置 前三个部分各占一个页面 页面高度 = 当前宽度 + 30(页面15padding) / 552.28去掉canvas20padding * 打印高度
$('#part1').css('height', (targetDom.width() + 30) / 552.28 * 841.89)
$('#part2').css('height', (targetDom.width() + 30) / 552.28 * 841.89)
$('#part3').css('height', (targetDom.width() + 30) / 552.28 * 841.89)
//.......