| 基于Vue实现Excel的解析与导出 | 您所在的位置：网站首页 › vue读取excel复杂表格 › 基于Vue实现Excel的解析与导出 |
基于Vue实现Excel的解析与导出
|
前言
最近在整理日常开发中长涉及到的业务需求，正好想到了excel的解析与上传方面的事情，在开发中还是比较常见的，趁着周末做一下整理学习吧 主要基于Vue+element实现文件的解析与导出，用的的插件是 xlsx,里面的具体方法，感兴趣的去研究一下，基本的样式，配置就不赘述了，也比较简单，我们直接上主食 代码实现 基本结构用户点击文件上传，将excel的表格已json的格式显示在页面中，用户进行操作，检查数据后对服务进行提交，上传操作用的的element中的upload组件 选取EXCEL文件 采集数据提交 小主，以下是采集完成的数据，请您检查无误后，点击“采集数据提交”按钮上传至服务器哦！ 复制代码 上传解析 通过upload组件可以获取上传的文件流(下图)将文件流转为二进制，这里我们可以在utils文件中增加对应的方法(如下) // 把文件按照二进制进行读取 export function readFile(file) { return new Promise(resolve => { let reader = new FileReader(); reader.readAsBinaryString(file); reader.onload = ev => { resolve(ev.target.result); }; }); } 复制代码通过xlsx将二进制六转为json,这样才能显示 //读取FILE中的数据（变为JSON格式） let data = await readFile(file); let workbook = xlsx.read(data, { type: "binary" }), worksheet = workbook.Sheets[workbook.SheetNames[0]]; data = xlsx.utils.sheet_to_json(worksheet); // 打印结果加下图 console.log(workbook); 复制代码把读取出来的数据变为最后可以传递给服务器的数据,我们需要先封装一个映射表来对应传给后端的格式（如下） // 字段对应表 export let character = { name: { text: "姓名", type: 'string' }, phone: { text: "电话", type: 'string' } }; 复制代码转换数据格式 let arr = []; data.forEach(item => { let obj = {}; for (let key in character) { if (!character.hasOwnProperty(key)) break; let v = character[key], text = v.text, type = v.type; v = item[text] || ""; type === "string" ? (v = String(v)) : null; type === "number" ? (v = Number(v)) : null; obj[key] = v; } arr.push(obj); }); 复制代码发送给服务器 这里要看服务器支持多条文件一起发送，如果不支持我们前端就可以采用递归逐条发送的方式进行发送，具体情况可以与后端进行沟通，我们这采用递归的方式进行传输 // 提交数据给服务器 async submit() { if (this.tempData.length { this.$message({ message: "小主，奴家已经帮您把数据上传了！", type: "success", showClose: true }); this.show = false; this.disable = false; loadingInstance.close(); }; // 需要把数据一条条传递给服务器 let n = 0; let send = async () => { if (n > this.tempData.length - 1) { // 都传递完了 complate(); return; } let body = this.tempData[n]; // 走接口 let result = await createAPI(body); if (parseInt(result.code) === 0) { // 成功 n++; } send(); }; send(); } 复制代码以上就是对Excel文件的解析与上传的总结，其实并不是很难，都是日常开发常常涉及的业务，接下来一起看下Excel的导出吧 Excel的导出 基本结构一进来页面获取刚刚上传的文件，然后显示在表格中，然后做个分页.......这些就不说了，我们直接从点击导出excel按钮开始,先看下页面结构 导出选中的数据 复制代码 导出Excel将json数据变为sheet数据，新建表格，在表格中插入一个sheet,通过xlsx的writeFile方法将文件写入 // 导出数据 submit() { if (this.selectionList.length { return { 编号: item.id, 姓名: item.name, 电话: item.phone }; }); // 将json数据变为sheet数据 let sheet = xslx.utils.json_to_sheet(arr), // 新建表格 book = xslx.utils.book_new(); // 在表格中插入一个sheet xslx.utils.book_append_sheet(book, sheet, "sheet1"); // 通过xlsx的writeFile方法将文件写入 xslx.writeFile(book, `user${new Date().getTime()}.xls`); loadingInstance.close(); this.disabled = false; } 复制代码**以上是对Excele的相关操作，文件上传解析是常见的需求，如果前端小伙伴们对大文件上传以及断电续传感兴趣的可以参考一下我的这篇文章大文件上传与断点续传，今天就到这了，最后送给前端小伙伴们一句话 夫学须静也，才须学也，非学无以广才，非志无以成学。淫慢则不能励精，险躁则不能治性。年与时驰，意与日去，遂成枯落 |
【本文地址】