Vue中使用html2canvas和jspdf插件實現導出pdf(自定義html樣式可帶圖片)並下載

場景

若依前后端分離版手把手教你本地搭建環境並運行項目：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

在上面搭建起來框架的基礎上，怎樣實現前端將html頁面的內容導出為pdf。

 

 

 

html2canvas官網

http://html2canvas.hertzen.com/

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、安裝插件

// 將頁面 html 轉換成圖片
npm install html2canvas --save 
// 將圖片生成 pdf
npm install jspdf --save

2、頁面上添加要導出的html元素

  <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>
      <el-image :src="logo"></el-image>
    </div>
    <button type="button" style="margin-top: 20px;" @click="btnClick">導出PDF</button>
  </div>

其中id為pdfDom的div里面是要導出為pdf的內容

el-image是一張要顯示的圖片

3、導出按鈕的點擊事件

    btnClick(){
      // 當下載pdf時，若不在頁面頂部會造成PDF樣式不對,所以先回到頁面頂部再下載
      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;
       // 一頁pdf顯示html頁面生成的canvas高度;
        let pageHeight = contentWidth / 841.89 * 592.28;
       // 未生成pdf的html頁面高度
        let leftHeight = contentHeight;
       // 頁面偏移
        let position = 0;
       // html頁面生成的canvas在pdf中圖片的寬高（本例為：橫向a4紙[841.89,592.28]，縱向需調換尺寸）
        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');
        // 兩個高度需要區分: 一個是html頁面的實際高度，和生成pdf的頁面高度
        // 當內容未超過pdf一頁顯示的范圍，無需分頁
        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;
            // 避免添加空白頁
            if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save(title + '.pdf')
      })
    },

4、完整示例代碼

<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>
      <el-image :src="logo"></el-image>
    </div>
    <button type="button" style="margin-top: 20px;" @click="btnClick">導出PDF</button>
  </div>
</template>

<script>
// 導出頁面為PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
import logoImg from '@/assets/logo/logo.png'
export default {
  name: "ExportPDF",
  data() {
    return {
      logo: logoImg,
      exportPDFtitle: "頁面導出PDF文件名",
      tableData: [
         {
          date: '2016-05-06',
          name: '王小虎',
          address: '重慶市九龍坡區火炬大道'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '重慶市九龍坡區火炬大道'
        },{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        },
      ]
 };
  },
  mounted() {

  },
  methods: {
    btnClick(){
      // 當下載pdf時，若不在頁面頂部會造成PDF樣式不對,所以先回到頁面頂部再下載
      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;
       // 一頁pdf顯示html頁面生成的canvas高度;
        let pageHeight = contentWidth / 841.89 * 592.28;
       // 未生成pdf的html頁面高度
        let leftHeight = contentHeight;
       // 頁面偏移
        let position = 0;
       // html頁面生成的canvas在pdf中圖片的寬高（本例為：橫向a4紙[841.89,592.28]，縱向需調換尺寸）
        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');
        // 兩個高度需要區分: 一個是html頁面的實際高度，和生成pdf的頁面高度
        // 當內容未超過pdf一頁顯示的范圍，無需分頁
        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;
            // 避免添加空白頁
            if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save(title + '.pdf')
      })
    },
  },
};
</script>

<style scoped>

</style>