开发环境:vue cil3.0脚手架,nodejs,npm
1、安装插件:html2canvas、jspdf
npm install html2canvas --save
npm install jspdf --save
2、新建js文件,命名jspdf.js
// 导出页面为PDF格式
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
export default {
install(Vue, options) {
Vue.prototype.getPdf = function (title, dom) {
// 注册getPdf方法,传入两个参数,此处使用了promise处理导出后的操作
/*
title: 导出文件名
dom: 需要导出dom的id
*/
return new Promise((resolve, reject) => {
html2Canvas(document.querySelector(dom), {
useCORS: true, // 由于打印时,会访问dom上的一些图片等资源,解决跨域问题!!重要
allowTaint: true // 允许跨域
}).then(function (canvas) {
let contentWidth = canvas.width;
let contentHeight = canvas.height;
// 根据A4纸的大小,计算出dom相应比例的尺寸
let pageHeight = contentWidth / 592.28 * 841.89;
let leftHeight = contentHeight;
let position = 0;
let imgWidth = 595.28;
// 根据a4比例计算出需要分割的实际dom位置
let imgHeight = 592.28 / contentWidth * contentHeight;
// canvas绘图生成image数据,1.0是质量参数
let pageData = canvas.toDataURL('image/jpeg', 1.0);
// a4大小
let PDF = new JsPDF('', 'pt', 'a4');
// 当内容达到a4纸的高度时,分割,将一整块画幅分割出一页页的a4大小,导出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(title + '.pdf');
resolve(true);
})
.catch(() => {
reject(false);
});
});
};
}
};
3、main.js引入
import htmlToPdf from './api/jspdf'
Vue.use(htmlToPdf)
// 在组件中可以调用this.getPdf(title, dom)方法导出
4、组件中使用
dom结构
<div class="content" id="content">
<div class="item">内容</div>
<div class="item">内容</div>
<!-- 每一块dom的class类设置成item(自定义)以此处理内容分割 -->
<div class="item">内容</div>
<div class="item">内容</div>
</div>
组件内编写导出方法,methods方法 outPutPdfFn,(其中isSplit方法判断是否要分割)
outPutPdfFn () {
let vm = this;
const A4_WIDTH = 592.28;
const A4_HEIGHT = 841.89;
// $myLoading 自定义等待动画组件,实现导出事件的异步等待交互
this.$myLoading('正在导出pdf,请稍候。。。', true);
vm.$nextTick(() => {
// dom的id。
let target = document.getElementById('content');
let pageHeight = target.scrollWidth / A4_WIDTH * A4_HEIGHT;
// 获取分割dom,此处为class类名为item的dom
let lableListID = document.getElementsByClassName('item');
// 进行分割操作,当dom内容已超出a4的高度,则将该dom前插入一个空dom,把他挤下去,分割
for (let i = 0; i < lableListID.length; i++) {
let multiple = Math.ceil((lableListID[i].offsetTop + lableListID[i].offsetHeight) / pageHeight);
if (this.isSplit(lableListID, i, multiple * pageHeight)) {
let divParent = lableListID[i].parentNode; // 获取该div的父节点
let newNode = document.createElement('div');
newNode.className = 'emptyDiv';
newNode.style.background = '#ffffff';
let _H = multiple * pageHeight - (lableListID[i].offsetTop + lableListID[i].offsetHeight);
newNode.style.height = _H + 30 + 'px';
newNode.style.width = '100%';
let next = lableListID[i].nextSibling; // 获取div的下一个兄弟节点
// 判断兄弟节点是否存在
console.log(next);
if (next) {
// 存在则将新节点插入到div的下一个兄弟节点之前,即div之后
divParent.insertBefore(newNode, next);
} else {
// 不存在则直接添加到最后,appendChild默认添加到divParent的最后
divParent.appendChild(newNode);
}
}
}
// 传入title和dom标签,此处是 #content
// 异步函数,导出成功后处理交互
this.getPdf('巡检报告单-' + this.formDataLabel.deviceCode + '-' + this.formDataLabel.createDate.substring(0, 10), '#content').then(() => {
// 自定义等待动画关闭
this.$myLoading(false);
this.$message({
type: 'success',
message: '导出成功'
});
this.detailSHow = false;
})
.catch(() => {
this.$myLoading(false);
this.$message({
type: 'error',
message: '导出失败,请重试'
});
});
});
}
isSplit (nodes, index, pageHeight) {
// 计算当前这块dom是否跨越了a4大小,以此分割
if (nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight) {
return true;
}
return false;
},
5、导出结果
左边:实际dom
右边:导出效果,进行了分割