vue-element-admin 项目中将局部页面导出为PDF格式

整体思路:将需要导出的内容页面转换为PDF格式，再通过图片的Base64码生成PDF。
html 页面
<el-button type=“success” @click=“getPdf(‘exportPdf’,filename)”>








js

下面我们将进行实际操作：
1.我们需要引入两个模块
html2canvas和jsPdf
安装上面两个模块：
npm install htm2canvas --save
npm install jspdf
2 定义全局函数…
创建一个exportToPdf.js文件在指定位置.我个人习惯放在(‘src/utils/exportToPdf’)

import html2Canvas from ‘html2canvas’
import JsPDF from ‘jspdf’
export default{
install (Vue, options) {
Vue.prototype.getPdf = function (id,title) {
var title = title
html2Canvas(document.querySelector(id), {
allowTaint: true
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL(‘image/jpeg’, 1.0)
let PDF = new JsPDF(’’, ‘pt’, ‘a4’)
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’)
}
)
}
}
}

3.在mian中引入
import exportToPdf　from ‘@/utils/exportToPdf’
Vue.use(exportToPdf)