vue-json-excel前端导出excel教程

vue-json-excel是一个专门为解决前端导出Excel而开发的一个组件库。

个人认为，导出在前端做，不是特别合适，最好是后端提供导出下载文件接口，如果后端确实不想提供接口，要让你做前端导出，那么不妨试试这个组件。

目录

​​一、安装依赖​​

​​二、引入配置​​

​​三、组件属性说明​​

​​四、导出HTML代码​​

​​五、导出逻辑代码​​

​​六、最终导出结果展示 ​​

​​七、使用该组件需要注意的点​​

---

一、安装依赖

npm install vue-json-excel

二、引入配置

import Vue from "vue";
import JsonExcel from "vue-json-excel";

Vue.component("downloadExcel", JsonExcel);

三、组件属性说明

四、导出HTML代码

<div style="float: right; padding-right: 4px; margin-bottom: 30px"> 
   <download-excel class="export-excel-wrapper1" :fields="json_fields" title="导出各单位统计数据" :data="json_data" :name="dwtjsjName" :before-generate="startDownload"> 
    <el-button size="mini" style="right: 140px; position: absolute">
     导出各单位统计数据
    </el-button> 
   </download-excel> 
  </div>

五、导出逻辑代码

<script>
    export default {
    name: "name",
    data() {
      return {
        json_fields: {
          序号: "ID",
          学校: "yyname",
          刷卡人数: "total",
          绿码人数: "greenNum",
          黄码人数: "yellowNum",
          红码人数: "redNum",
          未接种数: "ymzzNoNum",
          已接种数: "ymzzIsNum",
          开始时间: "startDate",
          结束时间: "endDate",
        },
        json_data: [], //导出表格数据
        dwtjsjName: "",
      };
    },

    methods: {
      async startDownload() {
        this.$modal.msgSuccess("文件正在下载中,请稍后...");
        this.dwtjsjName = "各单位统计数据.xls";
        await queryHealthCountData(data).then((response) => {
          let res = response.data;
          console.log(res);
          for (var i = 0; i < res.length; i++) {
            res[i].ID = i + 1;
          }
          this.json_data = res;
          return res;
        });
      }
    },
  };
  </script>

六、最终导出结果展示 

 七、使用该组件需要注意的点

总体来说，组件用法还是蛮简单的，如果需要动态加载数据然后导出，这里一般需要先调用接口获取数据，这里需要注意的地方就是，使用before-generate回调函数进行下载前的数据加载，这里调用的方法需要进行异步处理（async....await),否则下载的数据会是一个空Excel。