利用Export2Excel做前端导出

做导出一般是用后端生成的文件导出，遇到老六的后端，那只能前端自己想办法了，这里还真有可以前端导出excel文件，只是会有一些限制，不能设置多个sheet表（可能我暂时没发现）。

 

1.首先需要安装一些依赖，安装如下：

npm install xlsx file-saver -S

npm install script-loader -S -D

2.main.js 引入文件

import Blob from './excel/Blob'

import Export2Excel from './excel/Export2Excel.js'

3.以下是我封装的按钮组件，传参进来即可导出

<template>

    <div>

        <el-button size="small" type="primary" @click="exportExcel" icon="el-icon-download">导出</el-button>

    </div>

</template>

<script>

export default {

    data() {

        return {

            // selectList: [],  // 选中的数据

        }

    },

    props: {

        selectList: {

            type: Array,

            default: function () {

                return [];

            }

        },

        tableHeader: {

            type: Array,

            default: function () {

                return [];

            }

        },

        filterVal: {

            type: Array,

            default: function () {

                return [];

            }

        },

        exportExcelName: {

            type: String,

            default: "导出文件"

        }

    },

    methods: {

    //定义导出Excel表格事件

        exportExcel() {

            if (this.selectList.length === 0) {

                // this.$message({

                // message: "请至少选择一条需要导出的数据",

                // type: "warning",

                // });

                // return;

                this.$emit('getAllList')

            }

            this.$msgbox.confirm("该操作将导出选中的数据，是否继续", "提示", {

                    confirmButtonText: "确定",

                    cancelButtonText: "取消",

                    type: "warning",

                })

                .then(() => {

                    //导出

                    require.ensure([], () => {

                        const { export_json_to_excel } = require("@/utils/Export2Excel"); //注意这个Export2Excel路径

                        // const tableHeader = [

                        //     "地市",

                        //     "教材名称",

                        //     "教材类型",

                        //     "创建时间",

                        //     "描述",

                        //     "教材地址",

                        // ]; // 设置Excel表格的表头内容

                        // const filterVal = [

                        //     "province",

                        //     "mname",

                        //     "lname",

                        //     "createdate",

                        //     "memo",

                        //     "path",

                        // ]; // 跟表格表头对应的绑定的prop 属性值

                        let list = this.filterTableData(

                            JSON.parse(JSON.stringify(this.selectList))

                        ); // this.selectList为选中的要导出的数据，用filterTableData方法先处理一下数据格式(要进行深度拷贝，以免过滤的时候，影响页面上展示的数据)，再存到list

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

                        export_json_to_excel(this.tableHeader, data, this.exportExcelName); //最后一个是导出表格的名字

                    });

                })

                .catch(() => {});

        },

        formatJson(filterVal, Data) {

            return Data.map(v => filterVal.map(j => v[j]))

        },

        //导出数据前对数据处理，变为想要的格式。

        filterTableData(data) {

            data.forEach((item) => {

                item.country ? (item.province =item.province +"-" +item.city +"-" +item.area +"-" +

                    item.country)

                : (item.province = item.province + "-" + item.city + "-" + item.area);

                item.isdel ? (item.isdel = "已开启") : "已关闭";

            });

            return data;

        },

    }

}

</script>