vue前端导入excel文件（Vue中如何实现Excel导入导出）

时间2025-08-18 22:04:35分类IT科技浏览7340

导读：目标在前面员工的添加是一个一个进行的，如果一次性添加多个员工信息，这时候就会很繁琐...

目标

在前面员工的添加是一个一个进行的，如果一次性添加多个员工信息，这时候就会很繁琐

因此需要我们开发一个批量导入的功能，将用户的信息存储到 excel 中然后进行批量导入

实现方式

1. 分析 vue-element-admin 中的导入方案

在vue-element-admin中，大佬已经封装好了Excel的导入导出方案，我们需要引入借鉴,拷贝 vue-element-admin 中提供的 excel 导入功能组件到自己项目中

讲解

导入相关的代码文件有两个：

使用组件：src/views/excel/upload-excel.vue

定义组件：src/components/UploadExcel/index.vue // 注册全局组件

最新版的xlsx包, 导出的方式改变了, 所以我们要修改UploadExcel组件代码 // import XLSX from xlsx // 上面改成下面这样, 按需引入所有然后形成一个对象保存到XLSX变量上 import * as XLSX from xlsx

Excel 的导入导出都是依赖于js-xlsx来实现的，

在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据

由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader ，因此我们需要提前安装

file-saver 用户在客户端保存文件的 script-loader 用于在前端执行一次js脚本文件的 npm install xlsx file-saver -S npm install script-loader -S -D

tips:-S和-D (默认就是–save不写即可, -S -D(是–save-dev)

2. Excel导入

目标

数据格式转换：将 excel 解析好的数据经过处理后，转成可以传给接口调用的数据

分析

调用接口进行excel上传的重点其实是数据的处理 按照接口的要求，把 excel 表格中经过插件处理好的数据处理成后端接口要求的格式

实现

按接口要求，处理excel导入的数据。处理内容包含：

字段中文转英文。excel中读入的是姓名,而后端需要的是username 日期处理。从excel中读入的时间是一个 number 值，而后端需要的是标准日期代码（逻辑很重要，多写几遍） methods: { // 将表格中的数据进行格式化 transExcel(results) { const userRelations = { 入职日期: timeOfEntry, 手机号: mobile, 姓名: username, 转正日期: correctionTime, 工号: workNumber, 部门: departmentName, 聘用形式: formOfEmployment } return results.map(item => { const obj = {} // 1. 取出这个对象所有的属性名： [姓名， ‘手机号’] // 2. 遍历这个数组，通过中文名去 userRelations 找对应英文名，保存值 const contentKeys = Object.keys(item) contentKeys.forEach(key => { // 找到对应的英文名 const transKey = userRelations[key] // 如果格式化的是时间，需要进行转换 if (transKey === timeOfEntry || transKey === correctionTime) { // 表格的天数->转成日期对象 const transDate = new Date(formatExcelDate(item[key])) // 再把日期对象转成->年-月-日保存到对象属性里给后台 obj[transKey] = parseTime(transDate, {yyyy}-{mm}-{dd}) } else { obj[transKey] = item[key] } }) return obj }) }, // 导入成功以后的回调函数 handleSuccess({ results, header }) { const arr = this.transExcel(results) console.log(转换之后的格式是, arr) } }

上面用到的日期处理函数在 utils/index.js 中定义如下

// 把excel文件中的日期格式的内容转回成标准时间 export function formatExcelDate(numb, format = /) { const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000) time.setYear(time.getFullYear()) const year = time.getFullYear() + const month = time.getMonth() + 1 + const date = time.getDate() + if (format && format.length === 1) { return year + format + month + format + date } return year + (month < 10 ? 0 + month : month) + (date < 10 ? 0 + date : date) }

小结表格读出中文key对象, 如何转换英文key的对象的?

准备一个中文key和英文key映射关系的对象, 然后遍历数据里所有中文key拿出来, 换取英文key 再准备一个新的对象, 组织英文key和value值

调用接口

// 导入成功以后的回调函数 async handleSuccess({ results, header }) { const arr = this.transExcel(results) const res = await importEmployeeAPI(arr).catch(err => err) if (!res.success) return this.$message.error(res.message) this.$router.back() this.$message.success(操作成功) }

3. Excel导出

分析把vue-element-admin 中的导出功能，迁移本项目使用静态数据实现基础的导出功能（先不使用从接口获取的数据）

给导出按钮添加点击事件

<el-button type="success" size="small" @click="downloadExcel">导出excel</el-button> // 导出excel按钮->点击事件 downloadExcel() { import(@/vendor/Export2Excel).then(excel => { // excel表示导入的模块对象 excel.export_json_to_excel({ header: [姓名, 工资], // 表头必填 data: [ [刘备, 100], [关羽, 500] ], // 具体数据必填 filename: excel-list, // 文件名称 autoWidth: true, // 宽度是否自适应 bookType: xlsx // 生成的文件类型 }) }) }

以上代码表示:

当我们正式点击导出按钮之后，才去加载 vendor 文件夹中的Export2Excel模块 import 方法执行完毕返回的是一个 promise 对象，在then方法中我们可以拿到使用的模块对象重点关注 data 的配置部分，我们发现它需要一个严格的二维数组

Excel导出参数说明：

参数说明类型可选值默认值 header 导出数据的表头 Array / [] data 导出的具体数据 Array / [[]] filename 导出文件名 String / excel-list autoWidth 单元格是否要自适应宽度 Boolean true / false true bookType 导出文件类型 String xlsx, csv, txt, more xlsx Excel导出尝试实现

分析：

从后台重新获取数据（这样才能确保是最新的）对数据的格式进行转换（后端给的数据字段名都是英文的），以用来做导出

核心在于把后端接口返回的数据转成 Export2Excel 这个插件需要的格式

准备表头header数据 因为接口中返回的数据中的key是英文，而我们期望导出的表头是中文，所以提前准备中文和英文的映射关系

const map = { id: 编号, password: 密码, mobile: 手机号, username: 姓名, timeOfEntry: 入职日期, formOfEmployment: 聘用形式, correctionTime: 转正日期, workNumber: 工号, departmentName: 部门, staffPhoto: 头像地址 }

具体的表格数据我们需要通过接口从后端获取回来，难点在于如何把后端返回的数据处理成Export2Excel插件需求的二维数组格式。

示例

const dataArr = [ ["13600000001", "吕勇锐", "1992-08-04", "正式", "2020-01-01", "0001", "总裁办"] ["13600000002", "袁永安", "1993-08-04", "正式", "2020-01-01", "0002", "总裁办"] ]

最终的代码

methods: { // 处理数据的方法 transData(rows) { // 写代码 const map = { id: 编号, password: 密码, mobile: 手机号, username: 姓名, timeOfEntry: 入职日期, formOfEmployment: 聘用形式, correctionTime: 转正日期, workNumber: 工号, departmentName: 部门, staffPhoto: 头像地址 } const headerKeys = Object.keys(rows[0]) const header = headerKeys.map(item => { return map[item] }) const data = rows.map(obj => { return Object.values(obj) }) return { header, data } } // 导出 Excel async downloadExcel() { const res = await getEmployeeList() // 调用上面定义的方法，处理返回的数据 const excelObj = this.transData(res.data.rows) import(@/vendor/Export2Excel).then(excel => { // excel表示导入的模块对象 excel.export_json_to_excel({ header: excelObj.header, // 表头必填 data: excelObj.data, // 具体数据必填 filename: 员工列表, // 文件名称 autoWidth: true, // 宽度是否自适应 bookType: xlsx // 生成的文件类型 }) }) }, }

优化处理方法：数据顺序对应

transData(rows) { // 考虑顺序 (页面上列保持一致顺序) // 4.0 准备一个列表头中文数组 (8个) const headerArr = [序号, 姓名, 头像, 手机号, 工号, 聘用形式, 部门, 入职时间] // 4.1 数据key的映射关系(思路: 遍历上边数组里按照顺序, 取出中文的名字, 但是对应数组值的数组, 要从英文key对象中取出value值, 我要用中文key换到英文key然后去取到值) const myObj = { // 序号可以等遍历的时候直接用索引值, 而不是来自于英文对象里姓名: username, 头像: staffPhoto, 手机号: mobile, 工号: workNumber, 聘用形式: formOfEmployment, 部门: departmentName, 入职时间: timeOfEntry } // 4.2 按照顺序, 形成值的数组 (明确目标->想要数据结构->读代码(每个变量意思)读2-3遍->仿写3-5遍) const resultArr = rows.map((item, index) => { const valueArr = [] // 值小数组 headerArr.forEach(zhKey => { if (zhKey === 序号) { valueArr.push(index + 1) } else { const enKey = myObj[zhKey] valueArr.push(item[enKey]) } }) return valueArr }) return { header: headerArr, data: resultArr } }