Vue.js框架:前端转化html元素为pdf并导出
一、安装依赖
主要用到以下两个依赖:
html2canvas:通过获取HTML的某个元素,然后生成Canvas,能让用户保存为图片。
jspdf:基于HTML5的客户端解决方案,用于生成各种用途的 PDF 文档。
npm install html2canvas jspdf --save
二、全局引入
定义引入方法,单独添加一个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, //防止页面过宽导致右侧出现黑灰色背景区域 scale: 2 }).then(function (canvas) { let contentWidth = canvas.width let contentHeight = canvas.height //A4纸张标准宽高进行转换 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 '@/components/utils/htmlToPdf' // 使用Vue.use()方法就会调用工具方法中的install方法 Vue.use(htmlToPdf)
三、页面内调用导出方法进行文件导出下载
1、页面标签元素部分如下:
<div id="pdfDom"> <!-- 要下载的HTML页面,页面是由后台返回 --> <div v-html="pageData"></div> </div> <el-button type="primary" size="small" @click="getPdf('#pdfDom')">点击下载</el-button>
2、页面js部分如下:
export default { data () { return { htmlTitle: '页面导出PDF文件名' } } }