vue-导出excel表

1、下载

cnpm i  file-saver  --save

cnpm i  xlsx  --save

cnpm i  script-loader --dev

2、在src目录下新建一个vendor文件夹引入Blob.js和Export2Excel.js

3、页面使用

<el-button type="primary" icon="document" @click="handleDownload" >导出excel</el-button>

4、事件

// 导出excel

    handleDownload() {

      this.$api({

        method: "get",

        url: 接口地址,

      })

        .then(res => {

          if (res.code == 200) {

            if (!this.$empty(res.data)) {

              import("@/vendor/Export2Excel").then(excel => {

                const tHeader = [

                  "ID",

                  "用户UID",

                  "昵称"

                ];

                const filterVal = [

                  "id",

                  "userId",

                  "Name",

                ];

                const list = res.data;

                const data = this.formatJson(filterVal, list);

                excel.export_json_to_excel({

                  header: tHeader,

                  data,

                  filename: "某某统计表"

                });

              });

            } else {

              this.$message.error("暂无数据，不可导出");

            }

          }

        })

    },

formatJson(filterVal, jsonData) {

      return jsonData.map(v =>

        filterVal.map(j => {

          if (j === "timestamp") {

            return parseTime(v[j]);

          } else {

            return v[j];

          }

        })

      );

    }