前端vue用element读excel表格

### 实现Vue和Element UI读取Excel文件 为了实现在 Vue 项目中使用 Element UI 组件来读取 Excel 文件并解析其数据，可以采用 `xlsx` 库处理 Excel 文件的读取与解析工作。下面展示具体的方法。 #### 安装依赖库 首先，在项目中安装必要的 npm 包，包括用于操作 Excel 的 `xlsx` 和辅助工具包 `js-xlsx`： ```bash npm install xlsx js-xlsx --save ``` #### 创建上传组件模板 定义一个基于 Element UI 的上传控件，允许用户选择要导入的 Excel 文件： ```html <template> <div class="upload-excel"> <!-- 使用 el-upload 来创建文件上传 --> <el-upload ref="upload" :auto-upload="false" :on-change="handleChangeFile" :limit="1" action="" accept=".xls,.xlsx" style="margin-left: auto;margin-right: auto;display:block;"> <el-button slot="trigger" type="primary">选取文件</el-button> <el-button v-if="file != null" style="margin-left: 10px;" type="success" @click="submitUpload">点击上传</el-button> </el-upload> </div> </template> ``` 此部分代码设置了一个带有触发器按钮 (`el-button`) 的上传区域 (`el-upload`) ，当选择了新的文件时会调用 `handleChangeFile()` 方法[^2]。 #### 编写逻辑脚本 接下来编写 JavaScript 部分负责实际的数据加载过程以及对所选文件的内容进行初步分析： ```javascript <script> import XLSX from 'xlsx'; export default { data() { return { file: null, excelData: [] }; }, methods: { handleChangeFile(file, fileList) { this.file = file.raw; }, submitUpload() { const files = this.$refs.upload.uploadFiles; if (files.length <= 0) { alert('请选择文件'); return false; } else { let reader = new FileReader(); reader.onload = function(e) { try { /* 将二进制字符串转换为 workbook 对象 */ var wb = XLSX.read(e.target.result, {type:'binary'}); /* 获取第一个 sheet 表格的名字 */ var wsname = wb.SheetNames[0]; /* 获得该名字对应的表格对象 */ var ws = wb.Sheets[wsname]; /* 解析 JSON 数据 */ var jsonData = XLSX.utils.sheet_to_json(ws); console.log(jsonData); // 输出到控制台查看 // 这里可以根据需求进一步加工这些数据... this.excelData = jsonData.map(item => ({ ...item, date: item['日期'] ? formatDate(new Date(item['日期'])) : '' })); function formatDate(dateObj){ return `${dateObj.getFullYear()}-${String(dateObj.getMonth()+1).padStart(2,'0')}-${String(dateObj.getDate()).padStart(2,'0')}`; } } catch (e) { console.error("Error processing the uploaded file:", e); } }.bind(this); reader.readAsBinaryString(files[0].raw); } } } }; </script> ``` 上述代码实现了通过 `FileReader API` 加载本地文件，并利用 `xlsx` 库将其转化为易于使用的 JSON 数组结构。对于特定列中的日期字段进行了重新格式化的处理[^1]。