VUE2 + ElementUI 将Table数据导出为Excel文件——vue-json-excel

背景

使用vue-json-excel在前端实现表格数据的导出

安装

npm install vue-json-excel --save

全局注册

频繁使用的情境下

javascript 复制代码

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

Vue.component('downloadExcel', JsonExcel);

单文件使用

可直接复制

xml 复制代码

<!--封装好的下载组件-->
<template>
    <vue-json-excel ref="excelDownloader" :data="tableData" :fields="downloadFields" :name="exportName"
        :before-generate="beforeGenerate" :before-finish="beforeFinish">
        <el-button icon="el-icon-download" type="success">{{ downloadText }}
        </el-button>
    </vue-json-excel>
</template>

<script>
// 1. 引入插件
import VueJsonExcel from 'vue-json-excel'

export default {
    name: "Download",
    components: {
        VueJsonExcel
    },
    props: {
        downloadText: {
            type: String,
            default: "导出当前数据"
        },
        tableData: {
            type: Array,
            default: () => []
        },
        columns: {
            type: Array,
            default: () => []
        },
        exportName：{
            type: String,
            default: "下载文件"
        }
    },
    data() {
        return {
            downloadFields: {},
        }
    },
    mounted() {
    // 将表格列转换成json的格式， 例如 ：{ 姓名： 'name', 年龄:'age'}
        this.downloadFields = this.columns.reduce((prev, cur) => {
            prev[cur.label] = cur.prop
            return prev
        }, {})

    },
    methods: {
    // 导出前准备工作
        beforeGenerate() {
            if (this.tableData.length === 0) {
                this.$message.error('表格数据为空')
                return false
            }
            return true
        },
    // 导出完成后的前置工作
        beforeFinish() {
            this.$message.success("导出成功");
            return true
        },

    }
}
</script>

主要配置项

属性名	类型	描述	默认值	是否必填
data	Array	要导出的JSON数据源	---	是
fields	Object	定义导出的列。对象的键是Excel表头，值是对应的JSON数据字段名。如果不提供，将导出数据对象的所有字段	---	否
name	String	导出的文件名	`data.xls`	否
type	String	导出的文件类型，可选 `xls` 或 `csv`	`xls`	否
header	String/Array	在表格数据上方添加额外的标题行	---	否
footer	String/Array	在表格数据下方添加额外的脚注行	---	否
worksheet	String	Excel工作表的名称	Sheet1	否
default-value	String	当数据中的某个字段为空时，使用的默认值	''(空字符串)	否
fetch	Function	高级用法：一个异步函数，点击按钮时触发，用于动态获取数据。注意：如果同时设置了 `data` 属性，`fetch` 不会执行	---	否
before-generate	Function	开始生成文件前的回调函数，常用于显示加载状态	---	否
before-finish	Function	文件生成完成、即将弹出下载前的回调函数，常用于隐藏加载状态	---	否