Vue实现导出功能（无后端配合）

正常导出是后端来做，我们去调用后端接口，会返回给我们文件（前端即：axios请求，设置responseType: blob，然后创建一个a标签，通过window.URL.createObjectURL将blob转为一个路径，为a标签增加download属性，给其一个文件名称，执行click事件即可下载）；但是没有后端的情况下怎么做呢？下面来简单介绍一下：

首先安装两个插件

npm i file-saver -S
npm i xlsx -S

组件中使用（按需引入）

<el-button icon="el-icon-download" @click="downloadTpl()" size="small">导出</el-button>

<el-table
  id="myTable"
  :data="dataList"
  size="medium"
  border
  @selection-change="selectionChangeHandle"
  v-loading="loading"
  class="table"
>
  <!-- ... -->
</el-table>

<script>
import * as XLSX from xlsx
import FileSaver from file-saver
export default {
  methods: {
    // 导出
    downloadTpl() {
      let wb = XLSX.utils.table_to_book(document.getElementById(myTable), { raw: true })
      wb.Sheets.Sheet1 = this.delRepeat(wb.Sheets.Sheet1) // 去掉wb.Sheets.Sheet1对象中重复的value的属性
      // console.log(wb, ----->>>)
      let wbout = XLSX.write(wb, {
        bookType: xlsx,
        bookSST: true,
        type: array
      })
      // console.log(wbout, wbout----->>>)
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象、不一定是JavaScript原生格式的数据
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          "订单.xlsx"
        );
      } catch(e) {
        console.error(e, wbout, ----->>>)
      }
      // return wbout
    },
    // 对象去重
    delRepeat(obj) {
      let noRepeat = {}
      for(let key in obj) {
        let flag = true
        for(let k in noRepeat) {
          if(JSON.stringify(noRepeat[k]) == JSON.stringify(obj[key])) {
            flag = false
          }
        }
        if(flag) {
          noRepeat[key] = obj[key]
        }
      }
      return noRepeat
    }
  }
}
</script>

也可以把方法抽离出来，接受两个形参，分别是dom元素（table表格）的id 和导出的文件的名称