首先下载插件模块
npm install html2canvas jspdf --save
然后自定义一个js 方法,一般放在utils 中。 有一个注意事项将是用document.getbyid 获取。 使用querySelector 有时获取不到。js 方法可以直接复制使用。封装好了
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install(Vue, options) {
Vue.prototype.getPdf = function () {
var title = this.htmlTitle
html2Canvas(document.getElementById('#pdfDom'), {
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')
// debugger
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')
}
)
}
}
}
定义导出文件名
htmlTitle: "页面导出PDF文件名",
使用方法。 main.js 全局注册
// html 转PDF
import htmlToPdf from '@/utils/htmlToPdf'
// 使用Vue.use()方法就会调用工具方法中的install方法
Vue.use(htmlToPdf)
调用方法. 因为原型上定义了 getPdf 方法所以不需要写在methods 里
<div
class="info"
@click="getPdf('#pdfDom')"
> 下载PDF</div>
这是封装好的js
这是全局注册
这是调用方法和 设置名称在这里插入图片描述