技術標籤：vuevuejs

做個記錄

參考原文

按原文博主的操作一步一步來，就能實現把當前頁面生成pdf檔案並下載了。但是原文裡的id和名字是寫死的，不能變通，所以我加了小小的改動。可以讓任何頁面實現下載pdf;

原文有說的我就不多贅述了。放上我加了東西的部分程式碼：

htmlToPdf.js: 主要就是getPdf設定了引數，這樣就能動態的傳參下載了。

// 匯出頁面為PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {   // 全域性函式  getPdf
    Vue.prototype.getPdf = function (id,title) {//type 是要列印頁面的寫的id  title是該頁面生成pdf的名字
      var title = title
      html2Canvas(document.querySelector(id), {  //"#名字"
        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')
      }
      )
    }
  }



}
 

頁面程式碼：

<template>
  <div id="hardTable">
    <Button @click="test1">測試</Button>
    <Table :columns="cols" :data="list"  border
    >

    </Table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cols: [
        {
          title: "一級表頭",
          align: "center",
          children: [
            {
              title: "二級表頭-1",
              align: "center",
              children: [
                {
                  title: "套娃1",
                  align: "center"
                },
                {
                  title: "套娃2",
                  align: "center"
                },
                 {
                  title: "套娃3",
                  align: "center"
                },
                {
                  title: "套娃4",
                  align: "center"
                }
              ]
            },
            {
              title: "二級表頭-2",
              align: "center",
              children: [
                {
                  title: "套娃1",
                  align: "center"
                },
              
              ]
            },

          ]
        }
      ],
      list: []
    };
  },
  methods: {
    test() {
      
    },
    test1(){
      this.getPdf('#hardTable',"複雜表格");

 
    }
  },

};
</script>