1. 前言
- 最近vue 操作
excel导入导出面试的时候有些公司问到了- 在这里回忆以及更新下自己的知识库
- 之前开发做的
客服系统的时候 那些坐席相关的各种报表- 比如呼损表,呼叫表坐席表等用到了不少的
excel的导入 导出有些还是批量导出,这个到时候大数据在但是写吧
2. 准备工作
- 项目使用vue3+ elementPlus
- 处理
excel操作的常用库,xlsx或exceljs
帮助我们读取 Excel 文件的内容，并将其转换为可用的数据格式- 想起了
python里面处理excel的库pandas谁用谁知道
不过python里面简单的excel操作使用xlsx也足够了
3. excel 导入功能
1.安装依赖
npm install xlsx # 或者 npm install exceljs
2.vue组件实例代码
<template> <el-upload action="" :before-upload="handleFileUpload" > <el-button>点击上传</el-button> </el-upload> </template> <script> import { ref } from 'vue'; import { read, utils } from 'xlsx'; // 或者 import ExcelJS from 'exceljs'; export default { setup() { const handleFileUpload = (file) => { const reader = new FileReader(); reader.onload = (e) => { const data = new Uint8Array(e.target.result); const workbook = read(data, { type: 'array' }); // 或者 const workbook = new ExcelJS.Workbook(); const worksheet = workbook.Sheets[workbook.SheetNames[0]]; const jsonData = utils.sheet_to_json(worksheet, { header: 1 }); console.log(jsonData); // 在控制台中打印解析后的数据 // 在这里可以根据需要进一步处理数据，例如将数据存储到 Vuex 中或发送到后端 // 清空上传组件的文件列表 file.value = null; }; reader.readAsArrayBuffer(file.raw); return false; // 阻止上传组件的默认行为 }; return { handleFileUpload, }; }, }; </script>
- 使用 xlsx 库读取 Excel 文件的内容并将其解析为 JSON 格式
- 然后通过 console.log 打印出来。
- 可以根据需要对数据进行进一步处理,比如需要哪些字段。
- 这只是上传之前的准备工作
4. 结合服务端处理
Element Plus提供了el-upload组件，
可以与后端接口进行交互，实现文件的上传和处理- 配置
el-upload的属性和事件来实现Excel导入功能
<template> <el-upload action="/upload" <!-- 根据你的后端接口进行配置 --> :on-success="handleUploadSuccess" > <el-button>点击上传</el-button> </el-upload> </template> <script> export default { methods: { handleUploadSuccess(response) { // 在这里可以根据后端返回的数据进行处理 console.log(response); }, }, }; </script>
- 通过配置
action属性指定后端的接口地址- 然后通过
on-success事件处理上传成功后的响应。- 根据后端返回的数据进行进一步处理
5. excel 导出
- 组件实例代码
<template> <div> <el-button @click="exportToExcel">导出Excel</el-button> </div> </template> <script> import { ref } from 'vue'; import { write, utils } from 'xlsx'; // 或者 import ExcelJS from 'exceljs'; export default { setup() { const exportToExcel = () => { const data = [ ['姓名', '年龄', '性别'], ['John', 28, '男'], ['Jane', 32, '女'], ['Bob', 45, '男'] ]; const worksheet = utils.aoa_to_sheet(data); const workbook = utils.book_new(); utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 生成二进制流 const excelBuffer = write(workbook, { type: 'array', bookType: 'xlsx' }); // 创建 Blob 对象 const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); // 创建下载链接 const url = URL.createObjectURL(blob); // 创建下载链接并点击下载 const link = document.createElement('a'); link.href = url; link.download = 'data.xlsx'; link.click(); // 释放资源 URL.revokeObjectURL(url); }; return { exportToExcel, }; }, }; </script>
1.用
xlsx库将数据转换为Excel文件，
- 然后通过
创建下载链接实现文件的导出。- 你可以根据需要修改数据部分，使用不同的方法将数据转换为 Excel 格式，
例如 utils.aoa_to_sheet 将二维数组转换为工作表。- 然后使用 write 方法将工作表写入工作簿，最后创建下载链接并点击下载
- 导出也可以服务端来实现,就相当于典型的下载操作
