vue將HTML轉PDF匯出
阿新 • • 發佈:2020-10-23
步驟一
npm 安裝 html2canvas 和 jspdf
npm install html2canvas jspdf --save
步驟二
在某資料夾中建立名為htmlToPdf.js的檔案
在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
<div id="pdfDom"> <div v-html="pageData"></div> </div> <el-button @click="getPdf('#pdfDom')" size="mini" class="margin-3 width-80" plain>匯出</el-button> export default { data() { return { pageData:null, //接收html格式程式碼 htmlTitle: '匯出PDF的標題', } } }
作者:順小星
連結:https://www.jianshu.com/p/864a067ed7df