vue项目中导出excel文件（使用第三方依赖vue-json-excel）

资源包网址：GitHub - jecovier/vue-json-excelhttps://github.com/jecovier/vue-json-excel

参数列表：

参数	类型	说明	默认值
data	Array	要导出的数据。
fields	Object	要导出的 JSON 对象中的字段。如果未提供，则将导出 JSON 中的所有属性。
export-fields (exportFields)	Object	用于修复使用变量字段的其他组件（如 vee 验证）的问题。导出字段的工作方式与字段完全相同
type	string	Mime类型[xls, csv]	xls
name	string	要导出的文件名。	data.xls
header	string/Array	数据的标题。可以是字符串（一个标题）或字符串数组（多个标题）。
title(deprecated)	string/Array	与标题相同，出于复古兼容性目的，保留标题，但由于与 HTML5 title 属性冲突，不建议使用标题。
footer	string/Array	数据的页脚。可以是字符串（一个页脚）或字符串数组（多个页脚）。
default-value (defaultValue)	string	当行没有字段值时，用作回退。	''
worksheet	string	工作表选项卡的名称。	'Sheet1'
fetch	Function	在下载之前回调获取数据，如果它被设置，它会在鼠标按下后和下载之前立即运行。 重要提示:只有在没有定义数据道具的情况下才有效。
before-generate	Function	在生成/获取数据之前调用一个方法，例如:显示加载进度
before-finish	Function	回调在下载框弹出之前调用一个方法，例如:隐藏加载进度
stringifyLongNum	Boolean	字符串化长数字和小数(解决数字准确性损失的问题)，默认值:false
escapeCsv	Boolean	这将转义CSV值，以修复一些数字字段的excel问题。但这会用=" and "包装每个csv数据，为了避免你必须将该道具设置为false。默认值:真正的

1.安装 vue-json-excel 

npm install vue-json-excel -S

2.全局引入vue-json-excel

//该文件为main.js
import Vue from "vue";
import JsonExcel from "vue-json-excel";

Vue.component("downloadExcel", JsonExcel);

3.在需要导出excel文件的组件中使用downloadExcel组件

<template>
    <download-excel
      :fetch="fetchData"
      :fields="json_fields"
      worksheet="My Worksheet"
      name="导出的文件名字.xls"
      class="excel"
    >
        <el-button size="mini" class="el-icon-download"></el-button>
    </download-excel>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      list:[],
      json_fields: {},
    };
  },
  methods: {
    fetchData() {
      this.json_fields = {//表头名：对应表格数据中的属性名
        创建时间: "CREATED_TIME",
        集团名称: "Group_Name",
        公司名称: "Corp_Name",
        部门名称: "Dept_Name",
        创建人: "CREATED_BY",
        集团备注: "Group_Memo",
        公司备注: "Corp_Memo",
        部门备注: "Dept_Memo",
        状态: {
                field: "Status",
                callback: (value) => {
                return value === true ? "启用" : "禁用";
            },
      },
      };
      let excelList = [];
      //this.list是从后台接口获取的一个三级数据（注意：使用forEach前，先判断数组存不存在！）
      this.list.forEach((item) => {
        excelList.push(item);
        if (item.CorpList) {
          item.CorpList.forEach((item1) => {
            excelList.push(item1);
            if (item1.DeptList) {
              item1.DeptList.forEach((item2) => {
                excelList.push(item2);
              });
            }
          });
        }
      });
      return excelList ;
    },
};
</script>

4.点击导出按钮，浏览器自动下载excel文件。