文章目录
- 安装xlsx依赖和file-saver依赖
- Excel导出
- 使用element-ui的el-table展示数据
- 定义导出按钮
- 将数据导出
- excel导入
- 定义文件导入显示框
- 定义导入按钮
- 解析选择的文件进行导入
安装xlsx依赖和file-saver依赖
npm install xlsx -S
npm install file-saver -S
Excel导出
使用element-ui的el-table展示数据
<el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
定义导出按钮
<eh-button id="you-export" class="changeButton" @click="Export">主数据导出</eh-button>
将数据导出
//导出excelExport() {// 假设你的表格数据是从data属性获取的const data = this.getExportAllNodes(this.tableData);// 创建工作簿const ws = XLSX.utils.json_to_sheet(data);// 创建工作簿并添加工作表const wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, "Sheet1");// 生成Excel文件const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });// 字符串转ArrayBufferfunction s2ab(s) {const buf = new ArrayBuffer(s.length);const view = new Uint8Array(buf);for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;}// 保存文件saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), '物料主数据.xlsx');// this.$refs.tableData.openExport();},getExportAllNodes(list) {//exportOutData为在data中创建的列表变量: exportOutData:[]this.exportOutData = [];list.forEach(item => {this.exportOutData.push({'物料编码': item.mrlCode,'物料名称': item.mrlName,'组织编码': item.useOrgCode,'图号(旧编码)': item.mrlOldCode,'物料分组编码': item.mrlGroupCode,'产品组编码': item.proGroupCode,'物料属性': item.mrlProperty,'存货类别编码': item.categoryCode,'基本单位': item.baseUnitCode,'基本净重': item.netWeight,'固定提前期': item.fixLeadTime,'批号管理': item.batchManage,'仓库编码': item.stockCode,'采购单位编码': item.purchaseUnitCode,'采购计价单位编码': item.purPriceUnitCode,'采购员编码': item.purchaserCode,'计划批量类型编码': item.batchType,'计划MRP编码': item.mrlControllerCode,'生产车间编码': item.workShopCode,});})return this.exportOutData;},
excel导入
定义文件导入显示框
<el-dialogtitle="主数据导入":visible.sync="youDataDialogVisible"@close="dialogAssetImpClose"custom-class="dialog-auto"><el-formlabel-position="top"autocomplete="off"label-width="100px":inline="true"class="form-container form-inline"><div class="item-button"><el-button class="changeButton" v-throttle @click="hxMainDataUpload()">导入</el-button></div><el-form-item label="选择文件" prop="mbbUdiGid"><el-uploadref="upload"action="#":auto-upload="false":on-change="handleFileChange":before-upload="beforeUpload"><el-button slot="trigger" size="small" type="primary">选择Excel文件</el-button></el-upload></el-form-item></el-form></el-dialog>
定义导入按钮
<eh-button id="you-import" class="changeButton" @click="importYouData">主数据导入</eh-button>
点击导入按钮时将youDataDialogVisible 设置为true
解析选择的文件进行导入
importYouData(){//youDataDialogVisible为data中定义的变量：youDataDialogVisible: false,this.youDataDialogVisible = true;
},
handleFileChange(file, fileList) {this.file = file.raw;const reader = new FileReader();reader.readAsArrayBuffer(this.file);reader.onload = (e) => {const data = new Uint8Array(e.target.result);const workbook = XLSX.read(data, { type: 'array' });const firstSheetName = workbook.SheetNames[0];const worksheet = workbook.Sheets[firstSheetName];// const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });// 这里可以处理json数据，例如导入到数据库等const jsonData = XLSX.utils.sheet_to_json(worksheet);// jsonData现在是Excel文件的数据，格式为JSON// 在这里处理你的jsonData，例如保存到数据库等this.hxMainImportData = jsonData;};},hxMainDataUpload() {if (this.hxMainImportData == []) {this.$message.error('请选择要导入的Excel文件！');return;}let data = qs.stringify({hxMainDatas: JSON.stringify(this.hxMainImportData),loginId: this.$util.getCookie("loginName"),})//点击导入按钮，发送请求之前关闭数据导入弹窗this.$http.post("youController!importDatas.m", data).then((res) => {if (res.erroCode == 0) {this.hxMainDataDialogVisible = false;// 清除已上传的文件this.$refs.upload.clearFiles();this.queryHxMainMrlData();this.$message({message: res.msg,type: "success",});} else {this.$message({message: res.msg,type: "error",});}});},//数据导入弹窗关闭方法dialogAssetImpClose() {this.$refs.upload.clearFiles(); // 清除已上传的文件},beforeUpload(file) {const isExcel = /\.(xlsx|xls|csv)$/.test(file.name);if (!isExcel) {this.$message.error('只能上传.xlsx、.xls、.csv 文件!');return false;}return true;},},
