1. 前言

1. 最近vue 操作excel 导入导出面试的时候有些公司问到了
2. 在这里回忆以及更新下自己的知识库
3. 之前开发做的客服系统的时候 那些坐席相关的各种报表
4. 比如呼损表,呼叫表坐席表等用到了不少的excel的导入 导出有些还是批量导出,这个到时候大数据在但是写吧

---

2. 准备工作

1. 项目使用vue3+ elementPlus
2. 处理excel操作的常用库,xlsx 或exceljs
   帮助我们读取 Excel 文件的内容，并将其转换为可用的数据格式

3. 想起了 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>

1. 使用 xlsx 库读取 Excel 文件的内容并将其解析为 JSON 格式
2. 然后通过 console.log 打印出来。
3. 可以根据需要对数据进行进一步处理,比如需要哪些字段。
4. 这只是上传之前的准备工作

---

4. 结合服务端处理

1. Element Plus 提供了el-upload组件，
   可以与后端接口进行交互，实现文件的上传和处理
2. 配置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>

1. 通过配置 action属性指定后端的接口地址
2. 然后通过 on-success事件处理上传成功后的响应。
3. 根据后端返回的数据进行进一步处理

---

5. excel 导出

1. 组件实例代码

<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文件，

2. 然后通过创建下载链接实现文件的导出。
3. 你可以根据需要修改数据部分，使用不同的方法将数据转换为 Excel 格式，
   例如 utils.aoa_to_sheet 将二维数组转换为工作表。
4. 然后使用 write 方法将工作表写入工作簿，最后创建下载链接并点击下载

• 导出也可以服务端来实现,就相当于典型的下载操作

---

6.

---

7.

---

8.

---

9.

---

10.

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉