安装依赖
1. npm install --save html2canvas // 作用是html转图片 2. npm install jspdf --save // 再将图片转为pdf
目录标题
一、全局方法 （无论哪个页面都可调用）
1、新建一个htmlToPdf.js文件，拷入以下代码
import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' export default{ install (Vue, options) { Vue.prototype.getPdf = function (title) { html2Canvas(document.querySelector('#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') 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') } ) } } }
如图：
2、main.js引入
import htmlToPdf from './htmlToPdf';//路径根据自己的js文件来引入 Vue.use(htmlToPdf);
3、事件
给需要生成pdf的盒子设置id：pdfDom
给按钮一个全局事件方法getPdf('个人征信报告')，参数是文件名
二、局部方法
1、组件内引入
import html2Canvas from 'html2canvas' import JsPDF from 'jspdf'
2、事件调用
methods: { //导出pdf getPdf(title) { html2Canvas(document.querySelector('#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') 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') }) } }
