基于Vue实现Excel解析与导出功能详解基于Vue实现Excel解析与导出功能

前言
基本介绍
代码实现

基本结构
上传解析

Excel的导出

基本结构
导出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 = https://www.it610.com/article/await readFile(file); let workbook = xlsx.read(data, { type:"binary" }),worksheet = workbook.Sheets[workbook.SheetNames[0]]; data = https://www.it610.com/article/xlsx.utils.sheet_to_json(worksheet); // 打印结果加下图console.log(workbook);

【基于Vue实现Excel解析与导出功能详解】

文章图片

把读取出来的数据变为最后可以传递给服务器的数据,我们需要先封装一个映射表来对应传给后端的格式（如下）

// 字段对应表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 <= 0) {this.$message({message: "小主，请您先选择EXCEL文件！",type: "warning",showClose: true}); return; }this.disable = true; let loadingInstance = Loading.service({text: "小主，请您稍等片刻，奴家正在玩命处理中！",background: "rgba(0,0,0,.5)"}); // 完成后处理的事情let complate = () => {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 <= 0) {this.$message({message: "小主，请您先选择要导出的数据哦！",type: "warning",showClose: true}); return; }this.disabled = true; let loadingInstance = Loading.service({text: "小主，请您稍等片刻，奴家正在玩命处理中...",background: "rgba(0,0,0,.5)"}); let arr = this.selectionList.map(item => {return {编号: item.id,姓名: item.name,电话: item.phone}; }); // 将json数据变为sheet数据let sheet = xslx.utils.json_to_sheet(arr),// 新建表格book = xslx.utils.book_new(); // 在表格中插入一个sheetxslx.utils.book_append_sheet(book, sheet, "sheet1"); // 通过xlsx的writeFile方法将文件写入xslx.writeFile(book, `user${new Date().getTime()}.xls`); loadingInstance.close(); this.disabled = false; }

**以上是对Excele的相关操作，文件上传解析是常见的需求，如果前端小伙伴们对大文件上传以及断电续传感兴趣的可以参考一下我的这篇文章大文件上传与断点续传

总结到此这篇关于基于Vue实现Excel解析与导出功能的文章就介绍到这了,更多相关Vue Excel解析与导出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！