vue将HTML转PDF导出(纯干货) |
您所在的位置：网站首页 › 前端html页面生成pdf › vue将HTML转PDF导出(纯干货) |
| 第〇步：效果
返参格式 image.png导出格式（此时为PDF文件） image.png 步骤一npm 安装 html2canvas 和 jspdf npm install html2canvas jspdf --save 步骤二在某文件夹中创建名为htmlToPdf.js的文件 image.png在htmlToPdf.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.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') } ) } } } 步骤三在main.js中按路径引入并注册 import htmlToPdf from '@/mixin/htmlToPdf.js' // 使用Vue.use()方法就会调用工具方法中的install方法 Vue.use(htmlToPdf) 步骤四绑定id，且在导出按钮上加入getPdf导出方法。在data中定义导出pdf文件名，及接收html代码变量：pageData 导出 export default { data() { return { pageData:null, //接收html格式代码 htmlTitle: '导出PDF的标题', } } }大功告成，祝君成功。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |