前端代码 读取excel表格数据
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // dom < el-form-item label="批量录入:"> < div class="upload-button-box"> < input v-if="!fileName" type="file" ref="upload" accept=".xls,.xlsx" @change="readExcel" class="upload-button" /> < el-button v-if="!fileName" size="small" type="primary">上传文件</ el-button > < span v-else>{{ fileName }}</ span > < span class="tips">支持扩展名:.xls .xlsx,且不超过100M</ span > </ div > </ el-form-item > |
1 | import XLSX from 'xlsx' ; |
1 2 3 4 5 6 7 8 9 10 | // 定义data data () { return { fileObj: { '用户名' : 'name' , '密码' : 'code' , '号码' : 'phone' } } }, |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | // function readExcel (e) { const files = e.target.files; const fileReader = new FileReader(); fileReader.onload = (ev) => { try { const data = ev.target.result const workbook = XLSX.read(data, { type: 'binary' }) // 读取数据 const wsname = workbook.SheetNames[0] // 取第一张表 const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) // 生成json表格内容 // const ws1 = XLSX.utils.sheet_to_slk(workbook.Sheets[wsname]) // 输出表格对应位置是什么值 // const ws2 = XLSX.utils.sheet_to_html(workbook.Sheets[wsname]) // 生成HTML输出 // const ws3 = XLSX.utils.sheet_to_csv(workbook.Sheets[wsname]) // 生成分隔符分隔值输出 // const ws4 = XLSX.utils.sheet_to_formulae(workbook.Sheets[wsname]) // 生成公式列表(具有值回退) // const ws5 = XLSX.utils.sheet_to_txt(workbook.Sheets[wsname]) // 生成UTF16格式的文本 this .excelData = []; // 清空接收数据 for ( let i = 0; i < ws.length; i++) { let sheetData = ws[i] // 对数据自行操作 this .excelData.push(sheetData) } // 针对特殊数据转换可在这里处理 this .excelData = this .excelData.map(item => { let obj = {}; for ( let key in item){ let oKey = this .fileObj[key]; let txt = item[key]; obj[oKey] = txt; } return { ...obj } }) if ( this .excelData.length) { this .fileName = files[0].name; } } catch (e) { console.log(e) return false } } fileReader.readAsBinaryString(files[0]); }, |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· DeepSeek V3 两周使用总结
· 回顾我的软件开发经历(1)
· C#使用yield关键字提升迭代性能与效率
· 低成本高可用方案!Linux系统下SQL Server数据库镜像配置全流程详解
· 4. 使用sql查询excel内容