vue 电子表格Excel的上传导入、导出下载、读取本地Excel、json转Excel

        data(){
            return{
                fileData:'',
                tableData: []
            }
        },
        methods:{
            // ----------以下为导入Excel数据功能--------------
            // 文件选择回调
            onChange(file) {
                this.fileData = file; // 保存当前选择文件
                this.readExcel(); // 调用读取数据的方法
            },
            // 读取数据
            readExcel() {
                let that = this;
                const files = that.fileData;
                if (!files) {
                    return false;
                } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
                    this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
                    return false;
                }
                const fileReader = new FileReader();
                fileReader.onload = ev => {
                    try {
                        const data = ev.target.result;
                        const workbook = this.$XLSX.read(data, {
                            type: "binary"
                        });

                        if (workbook.SheetNames.length >= 1) {
                            this.$message({
                                message: "导入数据表格成功",
                                showClose: true,
                                type: "success"
                            });
                        }
                        const wsname = workbook.SheetNames[0]; //取第一张表
                        const ws = this.$XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
                        for (var i = 0; i < ws.length; i++) {
                            var sheetData = {
                                // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
                                name: ws[i]["姓名"],
                                gender: ws[i]["性别"],
                            };
                            that.tableData.push(sheetData);
                        }
                        this.$refs.upload.value = "";
                    } catch (e) {
                        return false;
                    }
                };
                // 如果为原生 input 则应是 files[0]
                fileReader.readAsBinaryString(files.raw);
            },
        }

        data() {
            return {
                tableData: [{"name": "张三", "gender": "男"}, {"name": "李四", "gender": "女"}]
            }
        },
        methods: {
            exportToExcel() {
                require.ensure([], () => {
                    const {export_json_to_excel} = require("@/plugins/Export2Excel");
                    // 导出后excel的表头
                    const tHeader = [
                        "姓名",
                        "性别"
                    ];
                    // 源数据对应的属性名
                    const filterVal = [
                        "name",
                        "gender"
                    ];
                    // 获取源数据
                    const list = this.tableData;
                    const data = this.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, "导出后的文件名");
                });
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]));
            },
        }