elementUI--关于导出功能（纯前端）

只能导出当前页：

第一步：npm安装依赖：npm install --save xlsx file-saver

第二步：页面引入:

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

第三步：绑定导出事件，在methods写：

exportA() {
      var xlsxParam = { raw: true }
      var wb = XLSX.utils.table_to_book(document.querySelector("#clientUserData"), xlsxParam)
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "fileName.xlsx"
        )
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout)
      }
      return wbout
18 }

碰到有分页的情况：需要导出所有数据，上面的方法就不好用了。提供另一种解决方法，举个例子：

 1     exportA() {
 2       const form = {
 3         keyword: this.keyword,
 4         userType: "client"
 5       }
 6 　　　　//接口方法名
 7       fetchUserList({
 8         ...form
 9       }).then((res) => {
10         this.listLoading = false
11         if (res.data.status !== 0) {
12           this.$notify({ title: this.$t('elements.failed'), message: this.$t('elements.acqui') + this.$t('elements.failed'), type: 'error', duration: 2000 })
13           return
14         }
15 　　　　//后台获取的数据
16         this.exportExcelList = res.data.data.list
17         import('@/vendor/Export2Excel').then(excel => {
18 　　　　//表格的表头  自行修改
19           const tHeader = ['用户名', '昵称', '手机号', '注册时间', '状态', '子账号数量']
20 　　　　// 对应的数据字段名  自行修改
21           const filterVal = ['username', 'nick', 'phoneNumber', 'ctime', 'userStatus', 'subAccounts']
22 　　　　//后台获取的数据
23           let list = this.exportExcelList
24 　　　　//自定义导出文件名
25           const filename = 'fileName'
26           const data = this.formatJson(filterVal, list)
27           excel.export_json_to_excel(
28             tHeader,
29             data,
30             filename
31           )
32         })
33       })
34     },
35     formatJson(filterVal, jsonData) {
36       return jsonData.map(v => filterVal.map(j => {
37         if (j === 'timestamp') {
38           return parseTime(v[j])
39         } else {
40           return v[j]
41         }
42       }))
43     }