vue实现生成pdf文件
主要就3个方法 exportReport outPutPdfFn isSplit
前置操作，我在vue原型上挂载了getPdf方法，方便复用
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
Vue.prototype.getPdf = function (title, dom, emptyDomId) {
// 注册getPdf方法，传入两个参数，此处使用了promise处理导出后的操作
/*
title: 导出文件名
dom: 需要导出dom的id
*/
return new Promise((resolve, reject) => {
html2Canvas(dom, {
useCORS: true, // 由于打印时，会访问dom上的一些图片等资源，解决跨域问题！！重要
allowTaint: true // 允许跨域
}).then(canvas => {
const contentWidth = canvas.width
const contentHeight = canvas.height
// 根据A4纸的大小，计算出dom相应比例的尺寸
const pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
const imgWidth = 595.28
// 根据a4比例计算出需要分割的实际dom位置
const imgHeight = 592.28 / contentWidth * contentHeight
// canvas绘图生成image数据，1.0是质量参数
const pageData = canvas.toDataURL('image/jpeg', 1.0)
// a4大小
const 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')
// 删除添加的空div
const emptyDom = document.getElementById(emptyDomId)
emptyDom.remove()
resolve(true)
})
.catch(() => {
reject(false)
})
})
}
1 首先template部分就是，给你要到处pdf内容的部分加上一个id标识，用于获取这个盒子的dom对象，如图我这里的id是pdfDom
2 接着就是第一个方法exportReport，也就是按钮触发的方法，这个方法里面很简单，就获取了pdfDom这个盒子的dom对象，然后调用生成pdf的方法outPutPdfFn
exportReport() {
const target = document.getElementById('pdfDom')
this.outPutPdfFn('pdf文件名', target, 'item')
},
3 下面就是主要生成pdf文件的函数
outPutPdfFn(title, target, itemClass) {
const vm = this
const A4_WIDTH = 592.28
const A4_HEIGHT = 841.89
vm.$nextTick(() => {
// dom的id。
const pageHeight = target.scrollWidth / A4_WIDTH * A4_HEIGHT
// 获取分割dom，此处为class类名为item的dom
const lableListID = document.getElementsByClassName(itemClass)
// 进行分割操作，当dom内容已超出a4的高度，则将该dom前插入一个空dom，把他挤下去，分割
for (let i = 0; i < lableListID.length; i++) {
const multiple = Math.ceil((lableListID[i].offsetTop + lableListID[i].offsetHeight) / pageHeight)
if (this.isSplit(lableListID, i, multiple * pageHeight)) {
const divParent = lableListID[i].parentNode // 获取该div的父节点
const newNode = document.createElement('div')
newNode.className = 'emptyDiv'
newNode.id = 'emptyDiv'
newNode.style.background = '#ffffff'
const _H = multiple * pageHeight - (lableListID[i].offsetTop + lableListID[i].offsetHeight)
newNode.style.height = _H + 30 + 'px'
newNode.style.width = '100%'
const 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(title, target, 'emptyDiv').then(() => {
// 自定义等待动画关闭
this.$message({
type: 'success',
message: '导出成功'
})
this.detailSHow = false
})
this.$nextTick(() => {
const emptyDom = document.getElementById('emptyDiv')
emptyDom.remove()
})
})
},
4 生成pdf函数中还涉及到了一个是否切割的函数判断，如下
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
},
至此一个简单的生成pdf功能就实现了，上述的方法基本都封装好了，使用上述的3个方法，只需要自己对需要生成pdf内容的盒子进行id的添加，将方法带入就可以了。