2022-06-16 vue+iview+xlsx 实现导入excel并将数据渲染到table
前言:业务需要批量导入数据,在导入前把数据展示出来做个预览,这里写的就是这预览部分。
需要一些依赖:npm install -S file-saver xlsx
在main.js引入:
import XLSX from 'xlsx'
Vue.prototype.XLSX = XLSX
注:我在网上看到的一篇文章,有用,便摘抄了一部分内容进来。原博主文章:http://t.zoukankan.com/guwufeiyang-p-13245875.html
原博主用的是element的框架,我用的是iview,这二者还有有一点区别的,在于等会用到的FileReader(一种异步文件读取机制)files.raw
html部分,需要用到upload组件,这个element和iview的大同小异,代码如下:
<Upload action="" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" :format="['xls', 'xlsx']" :show-upload-list="false" :max-size="2048" :before-upload="handleBefore2" > <Button type="primary" style="background-color: #1890ff;border-color: #1890ff; color: #fff;" > <Icon type="md-arrow-round-up" size="14" /> 批量导入 </Button> </Upload>
methods部分:
// 导入之前判断 handleBefore2(file) { const types = [ "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ]; if (types.indexOf(file.type) === -1) { Message.warning("不支持的文件类型"); return false; } this.handleImport22(file); return false; }, // 处理批量导入快递单号(把excel数据渲染在table里) handleImport22(file) { let that = this; const fileReader = new FileReader(file); fileReader.onload = ev => { try { const data = ev.target.result; const workbook = that.XLSX.read(data, { type: "binary" }); const wsname = workbook.SheetNames[0]; //取第一张表 const ws = that.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容 for (var i = 0; i < ws.length; i++) { var sheetData = { // 键名为绑定 el 表格的关键字,值则是 ws[i][对应表头名] id: ws[i]["序号"], name: ws[i]["姓名"] }; that.batchImportData.push(sheetData); } } catch (e) { return false; } }; // 如果为原生 input 则应是 files[0] fileReader.readAsBinaryString(file); // 这里要注意 },
代码倒数第二行:fileReader.readAsBinaryString(file);
这里要注意:如果是element的,那就是fileReader.readAsBinaryString(file.row);如果是iview就不用row。
这是因为element的upload组件在封装原生input时多加了一层row,而iview就没有。我记得antd好像也包裹了一层row。
加了row的结果:导致FileReader读取不到input的值。
解决方案:file.row。