前端excel导入和导出

安装依赖

yarn add xlsx

Template

<input
   class="excel-import"
    type="file"
    @change="uploadChange"
    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
/>
<button @click="excelImport">excel导入</button>

Script

import XLSX from "xlsx";
export default {
	methods: {
		excelImport() {
			document.querySelector(".excel-import").click();
		},
		uploadChange(event) {
            let xlsxKey = this.xlsxKey;
            if (!event.currentTarget.files.length) {
                return;
            }
            const that = this;
            // 拿取文件对象
            var f = event.currentTarget.files[0];
            
			// 清空选中内容,否则第二次选择同样的文件不会触发change
            let obj = document.querySelector(".excel-import");
            obj.value = "";
            
            // 用FileReader来读取
            var reader = new FileReader();
            // 重写FileReader上的readAsBinaryString方法
            FileReader.prototype.readAsBinaryString = function (f) {
                var binary = "";
                var wb; // 读取完成的数据
                var outdata; // 你需要的数据
                var reader = new FileReader();
                reader.onload = function (e) {
                    // 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
                    var bytes = new Uint8Array(reader.result);
                    var length = bytes.byteLength;
                    for (var i = 0; i < length; i++) {
                        binary += String.fromCharCode(bytes[i]);
                    }
                    // 接下来就是xlsx了，具体可看api
                    wb = XLSX.read(binary, {
                        type: "binary",
                    });
                    outdata = XLSX.utils.sheet_to_json(
                        wb.Sheets[wb.SheetNames[0]]
                    );
                    // 根据xlsxKey转换表格数据为JSON
                    let res = outdata.map((item) => {
                        let temp = {};
                        Object.values(item).forEach((ele, index) => {
                            temp[xlsxKey[index]] = ele;
                        });
                        return temp;
                    });
                };
                reader.readAsArrayBuffer(f);
            };
            reader.readAsBinaryString(f);
        },
    }
	}
}

xlsxKey

对应每列对应的key，格式如下

const xlsxKey = ["no", "name", "model", "level"];