vue 下载Excel 文件 vue-json-excel

1.安装

npm install vue-json-excel -S

2.引入

在mian.js中

	//引入 导出Excel vue-json-excel      
import JsonExcel from "vue-json-excel";
Vue.component("downloadExcel", JsonExcel);

3.构建外部-公共组件 downloadExcel

通过传值的方式，传入参数。参考父子组件传值

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


<script>
export default {
 props: {
   list: Array,
   json_fields: Object,
   json_name: String,
 },
 data() {
   return { };
 },
 methods: {
   fetchData() {
     let excelList = [];
     console.log("this.list");
     console.log(this.list);
     //this.list是从后台接口获取的一组JSON数据（注意：使用forEach前，先判断数组存不存在！）
     this.list.forEach((item) => {
       excelList.push(item);
     });
     console.log("excelList");
     console.log(excelList);
     return excelList;
   },
 },
};
</script>

<style lang="less" scoped>
.excel {
 display: inline-block;
}
</style>

4.使用公共组件

引入

import downloadExcel from "@/components/downloadExcel.vue";

定义

components: { downloadExcel},

使用在 vue 页面中

<!-- Excel -->
          <downloadExcel
            :list="list"
            :json_fields="json_fields"
            :json_name="json_name"
          />

相关参数。json_fields是下载的时候对应的 表头和字段。json_name是下载时候的名字。list是table表中绑定的数据。

json_fields: {
        户主姓名: "Name",
        户主证件类型: "Id_Type",
        户主证件号码: {	//身份证号码长度 太长，变成科学计数法，通过将其变为字符串来解决
          field: "Id_No",
          callback: value => {
            return " " + value;
          }
        },
        // 状态: {
        //   field: "Status",
        //   callback: (value) => {
        //     return value === true ? "启用" : "禁用";
        //   },
        // },
      },
      json_name: "房屋图.xls",

点击按钮下载就行。