详解如何实现在Vue中导入Excel文件
更新时间:2022年01月24日 15:49:44 作者:Survivor
这篇文章主要介绍了如何在Vue中导入Excel文件,文中的示例代码讲解详细,对我们学习或工作有一定帮助,感兴趣的小伙伴可以跟随小编一起了解一下
以将此Excel导出为json数据为例
一、安装依赖
npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev
二、template中
<span>导入表格</span> <input id="upload" type="file" @change="importfxx()" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
三、script中js代码
methods:{ // 处理导入Excel中日期问题 formatDate(numb, format) { const time = new Date((numb - 1) * 24 * 3600000 + 1); time.setYear(time.getFullYear() - 70); const year = time.getFullYear() + ""; const month = time.getMonth() + 1 + ""; const date = time.getDate() - 1 + ""; if (format && format.length === 1) { return year + format + month + format + date; } return ( year + (month < 10 ? "0" + month : month) + (date < 10 ? "0" + date : date) ); }, // 导入Excel importfxx() { let _this = this; let f = event.currentTarget.files[0]; let rABS = false; //是否将文件读取为二进制字符串 let reader = new FileReader(); //if (!FileReader.prototype.readAsBinaryString) { FileReader.prototype.readAsBinaryString = function (f) { let binary = ""; let rABS = false; //是否将文件读取为二进制字符串 let wb; //读取完成的数据 let outdata; let reader = new FileReader(); reader.onload = function (e) { let bytes = new Uint8Array(reader.result); let length = bytes.byteLength; for (let i = 0; i < length; i++) { binary += String.fromCharCode(bytes[i]); } let XLSX = require("xlsx"); if (rABS) { wb = XLSX.read(btoa(fixdata(binary)), { //手动转化 type: "base64", }); } else { wb = XLSX.read(binary, { type: "binary", }); } outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西 const keyObj = { 序号: "id", 情况跟踪: "track", 日期: "date", 标题: "title", 状态: "status", 结果: "result", 预警: "warning", }; outdata.forEach((item) => { // 将中文的键名替换成英文的 for (let k in keyObj) { let newKey = keyObj[k]; if (newKey) { item[newKey] = item[k]; delete item[k]; } } item["date"] = _this.formatDate(item["date"], "-"); }); console.log(outdata); }; reader.readAsArrayBuffer(f); }; if (rABS) { reader.readAsArrayBuffer(f); } else { reader.readAsBinaryString(f); } }, }
如上操作之后,打印结果是如下
到此这篇关于详解如何实现在Vue中导入Excel文件的文章就介绍到这了,更多相关Vue导入Excel文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
element自定义 多文件上传 触发多次on-change问题
这篇文章主要介绍了element自定义 多文件上传 触发多次on-change问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-03-03误引用vuex-persistedstate导致用户信息无法清除问题及解决
这篇文章主要介绍了误引用vuex-persistedstate导致用户信息无法清除问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-04-04关于vue中ref的使用(this.$refs获取为undefined)
这篇文章主要介绍了关于vue中ref的使用(this.$refs获取为undefined),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-03-03
最新评论