Vue 导出当前页面为pdf文件

做个记录

参考原文

按原文博主的操作一步一步来，就能实现把当前页面生成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>