Vue前端如何實(shí)現(xiàn)生成PDF并下載功能詳解

更新時(shí)間：2021年10月08日 09:53:55 作者：明天也要努力

在前端的崗位上經(jīng)常需要實(shí)現(xiàn)個(gè)生成個(gè)并下載的可視化圖表頁(yè)P(yáng)DF文件,這篇文章主要給大家介紹了關(guān)于Vue前端如何實(shí)現(xiàn)生成PDF并下載功能的相關(guān)資料,需要的朋友可以參考下

1. 安裝及引入

// 將頁(yè)面 html 轉(zhuǎn)換成圖片
npm install html2canvas --save  
// 將圖片生成 pdf
npm install jspdf --save

在項(xiàng)目主文件 main.js 中引入定義好的實(shí)現(xiàn)方法并注冊(cè)

import htmlToPdf from '@/utils/htmlToPdf';
// 使用 Vue.use() 方法就會(huì)調(diào)用工具方法中的install方法
Vue.use(htmlToPdf);

傳送門：Vue中 Vue.use() 原理及使用

2. 封裝導(dǎo)出 pdf 文件方法

配置詳解

let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);
第一個(gè)參數(shù)： l：橫向  p：縱向
第二個(gè)參數(shù)：測(cè)量單位（"pt"，"mm", "cm", "m", "in" or "px"）；
第三個(gè)參數(shù)：可以是下面格式，默認(rèn)為“a4”。如需自定義格式，只需將大小作為數(shù)字?jǐn)?shù)組傳遞，如：[592.28, 841.89];
		   a0 - a10
		   b0 - b10
		   c0 - c10
  		   dl
		   letter
		   government-letter
		   legal
		   junior-legal
		   ledger
		   tabloid
		   credit-card

pdf.addPage() 在PDF文檔中添加新頁(yè)面，默認(rèn)a4。參數(shù)如下：

pdf.addImage() 將圖像添加到PDF。參數(shù)如下：

刪除某頁(yè) pdf

let targetPage = pdf.internal.getNumberOfPages(); //獲取總頁(yè)
pdf.deletePage(targetPage); // 刪除目標(biāo)頁(yè)

保存 pdf 文檔

pdf.save(`測(cè)試.pdf`);

封裝導(dǎo)出 pdf 文件方法（utils/htmlToPdf.js）

// 導(dǎo)出頁(yè)面為PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      // 當(dāng)下載pdf時(shí)，若不在頁(yè)面頂部會(huì)造成PDF樣式不對(duì),所以先回到頁(yè)面頂部再下載
      let top = document.getElementById('pdfDom');
      if (top != null) {
        top.scrollIntoView();
        top = null;
      }
      let title = this.exportPDFtitle;
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: true
      }).then(function (canvas) {
        // 獲取canvas畫布的寬高
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
	      // 一頁(yè)pdf顯示html頁(yè)面生成的canvas高度;
        let pageHeight = contentWidth / 841.89 * 592.28;
	      // 未生成pdf的html頁(yè)面高度
        let leftHeight = contentHeight;
	      // 頁(yè)面偏移
        let position = 0;
	      // html頁(yè)面生成的canvas在pdf中圖片的寬高（本例為：橫向a4紙[841.89,592.28]，縱向需調(diào)換尺寸）
        let imgWidth = 841.89;
        let imgHeight = 841.89 / contentWidth * contentHeight;
        let pageData = canvas.toDataURL('image/jpeg', 1.0);
        let PDF = new JsPDF('l', 'pt', 'a4');
        // 兩個(gè)高度需要區(qū)分: 一個(gè)是html頁(yè)面的實(shí)際高度，和生成pdf的頁(yè)面高度
        // 當(dāng)內(nèi)容未超過(guò)pdf一頁(yè)顯示的范圍，無(wú)需分頁(yè)
        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 -= 592.28;
            // 避免添加空白頁(yè)
            if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save(title + '.pdf')
      })
    }
  }
}

相關(guān)組件中應(yīng)用

<template>
  <div class="wrap" >
    <div id="pdfDom" style="padding: 10px;">
      <el-table
        :data="tableData"
        border>
        <el-table-column prop="date" label="日期" width="250"></el-table-column>
        <el-table-column prop="name" label="姓名" width="250"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </div>
    <button type="button" style="margin-top: 20px;" @click="btnClick">導(dǎo)出PDF</button>
  </div>

</template>
 
<script>
export default {
  data() { 
    return {
      exportPDFtitle: "頁(yè)面導(dǎo)出PDF文件名",
      tableData: [
         {
          date: '2016-05-06',
          name: '王小虎',
          address: '重慶市九龍坡區(qū)火炬大道'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '重慶市九龍坡區(qū)火炬大道'
        },{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '南京市江寧區(qū)將軍大道'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '南京市江寧區(qū)將軍大道'
        },, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        },{
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '武漢市洪山區(qū)文化大道'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '武漢市洪山區(qū)文化大道'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '武漢市洪山區(qū)文化大道'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '南京市江寧區(qū)將軍大道'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '武漢市洪山區(qū)文化大道'
        },
      ]
    } 
  }, 
  methods: {
    btnClick(){
      this.$nextTick(() => {this.getPdf();})
    },
  },  
}
</script>