**功能背景:**前天接到了需求,就是项目里面下载pdf ,以前也做过,不过是后台给个链接,我用a标签装一下就好了,现在要在前端直接下载,也不调用后台接口。
工具:html2canvas 、jspdf
下载:cnpm install html2canvas jspdf --save
1.项目里面建一个js文件夹
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install(Vue, options) {
Vue.prototype.getPdf = function(dom, title) {
var that = this
html2Canvas(document.querySelector(dom), {
allowTaint: true
}).then(function(canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
console.log(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')
let PDF = new JsPDF('', 'pt', 'a4')
// return
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')
that.isPrint = true
})
}
}
}
2.main.js 中引入全局方法 (看个人,也可以直接做单页面方法,这里不赘述)
import getPdf from '@/components/untils/getPDF.js'
Vue.use(getPdf)
3.项目直接调用方法
this.getPdf(".content", this.resume1.name);
第一个参数是标签名,第二个是保存的文件名
好啦就,具体细节自己稍微调一下就好了