Vue頁面轉Pdf實踐

做者：顏亦浠@毛豆前端

這一次咱們來聊聊如何把頁面轉換成Pdf文件，常常會有這種場景，一些合同、協議等的頁面須要進行下載，並且須要和頁面保持一致，那麼最好的方式就是直接把頁面轉換成相應的格式就行了，目前基本上就是Doc和Pdf這2種比較流行，咱們就以Vue寫的頁面爲例來看看如何轉成Pdf文件。

模塊依賴

主要依賴兩個模塊：html2canvas和jspdf：

（1）npm install --save html2canvas（將頁面html轉換成圖片）

（2）npm install --save jspdf（將圖片生成pdf）

定義HtmlToPdf插件

建立一個htmlToPdf.js文件在指定位置內容以下：

// 導出頁面爲PDF格式

import html2canvas from 'html2canvas'

import JSPDF from 'jspdf'

export default {

    install(Vue, options) {
        Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) {
            var element = document.getElementById('pdfContent')
            html2canvas(element, {

                logging: false

            }).then(function (canvas) {
                var pdf = new JSPDF('p', 'mm', 'a4') // A4紙，縱向

                var ctx = canvas.getContext('2d')

                var a4w = 170;
                var a4h = 257 // A4大小，210mm x 297mm，四邊各保留20mm的邊距，顯示區域170x257

                var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4顯示比例換算一頁圖像的像素高度

                var renderedHeight = 0

                while (renderedHeight < canvas.height) {
                    var page = document.createElement('canvas')

                    page.width = canvas.width

                    page.height = Math.min(imgHeight, canvas.height - renderedHeight) // 可能內容不足一頁

                    // 用getImageData剪裁指定區域，並畫到前面建立的canvas對象中
                    page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
                    pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加圖像到頁面，保留10mm邊距
                    renderedHeight += imgHeight

                    if (renderedHeight < canvas.height) {
                        pdf.addPage()
                    } // 若是後面還有內容，添加一個空頁
                    // delete page;
                }
                pdf.save(htmlTitle + currentTime)
            })
        }
    }
}
複製代碼

安裝插件

接下來咱們須要把上面實現的插件安裝到Vue中： 在main.js中安裝插件

import htmlToPdf from '@/components/utils/htmlToPdf'
Vue.use(htmlToPdf)
複製代碼

使用ExportSavePdf轉換

定義好要轉換的dom容器，而後直接調用ExportSavePdf函數，傳入參數便可：

<template>
  <div>
    <div ref="pdfContent" id="pdfContent">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="province" label="省份" width="120"></el-table-column>
        <el-table-column prop="city" label="市區" width="120"></el-table-column>
        <el-table-column prop="address" label="地址" width="300"></el-table-column>
        <el-table-column prop="zip" label="郵編" width="120"></el-table-column>
        <el-table-column fixed="right" label="操做" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">編輯</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button type="danger" @click="ExportSavePdf()">導出PDF</el-button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import JSPDF from 'jspdf'
export default {
  methods: {
    handleClick(row) {
      console.log(row)
    },
  },

  data() {
    return {
      htmlTitle: 'PDF名稱',
      nowTime: '',
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀區',
          address: '上海市普陀區金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀區',
          address: '上海市普陀區金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀區',
          address: '上海市普陀區金沙江路 1518 弄',
          zip: 200333,
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀區',
          address: '上海市普陀區金沙江路 1518 弄',
          zip: 200333,
        },
      ],
    }
  },
}
</script>
複製代碼