给我实现一个前端的 Excel 导入和导出功能（一）

2023-04-20 259

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 给我实现一个前端的 Excel 导入和导出功能

前言

【负责人 A】：现在报表部分基于接口的 Excel 的导入和导出功能有点慢，前端这边能不能实现一下这个功能，然后我们在比对看看效果！

【切图仔 B】： 接口这边不能优化一下吗？比如排查下慢的原因什么的。

【负责人 A】：现在后端开发任务比较重，处理的核心任务也多还会涉及一些架构上的调整，所以想着前端这边可以处理一下，然后看看整体效果。

【切图仔 B】： OK，试试就 ~ Shi Shi ~

下面就基于 xlsx 这个第三方库封装一个 <ExcelUpload /> 组件实现表格导入，以及 json 数据导出 Excel 功能的 json2Excel() 工具方法。

选择 xlsx 的原因如下图所示：

Excel 解析为 JSON

基本内容

组件效果和结构

组件内容是很简单的结构和视图，直接查看如下的页面效果和代码即可：

<template>
  <input
    type="file"
    ref="excelRef"
    :accept="props.accept"
    @change="onChange"
    class="excel"
  />
  <h1>解析数据：</h1>
  <h2>
    <code>{{ excelData }}</code>
  </h2>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import * as XLSX from 'xlsx'
interface Props {
  accept: string
}
const props = withDefaults(defineProps<Props>(), {
  accept:
    '.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
})
const excelRef: any = ref(null)
const excelData: any[] = reactive([])
const onChange = (event: any) => {
  // 获取文件对象
  const file = event.target.files[0]
  console.log(file)
}
</script>
复制代码

Excel 数据格式

Excel 数据格式有两种，一种是 有表头说明 的，另一种是 无表头说明 的，具体内容如下：

有表头说明
无表头说明

实现 Excel 转 JSON 功能

核心步骤

通过 FileReader 以二进制的方式读取 Excel 文件，即 fileReader.readAsBinaryString(file)
将对应的二进制数据通过 XLSX.read(fileData, { type: "binary" }) 方法生成 workbook 对象
workbook.SheetNames[0] 获取第一个 Sheet 的名称 wsname，因为表格是有序列表，因此可以有多个 Sheet
通过 XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) 方法将对应的 Sheet 内容转换为 JSON 数据

效果演示

有表头说明
无表头说明

具体代码

// 读取对应表格文件
const readerExcel = (file: File) => {
  const fileReader = new FileReader();
  // 以二进制的方式读取表格内容
  fileReader.readAsBinaryString(file);
  // 表格内容读取完成
  fileReader.onload = (event: any) => {
    try {
      const fileData = event.target.result;
      const workbook = XLSX.read(fileData, {
        type: "binary",
      });
      // 表格是有序列表，因此可以取多个 Sheet，这里取第一个 Sheet
      const wsname = workbook.SheetNames[0];
      // 将表格内容生成 json 数据
      const sheetJson = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
      console.log(sheetJson); // 得到的表格 JSON 内容
    } catch (e) {
      console.log(e);
      return false;
    }
  };
};
// 文件变化时触发
const onChange = (event) => {
  // 获取文件对象
  const file = event.target.files[0];
  // 读取文件内容
  readerExcel(file);
  // 清除数据
  clearFile();
};
const clearFile = () => {
  excelRef.value.value = "";
};
复制代码

格式化 JSON 数据

这里需要考虑 有表头说明 和 无表头说明 的情况，为了方便统一处理，作如下规定：

通过将 有表头说明 的数据格式统一转化为 无表头说明 的数据格式
统一将 无表头说明 的数据格式转化为标准的接口入参，即 { key: value }，这里需要建立一个 name -> key 的映射关系：

const excelNameToKey = {
  '姓名': "name",
  '年龄': "age",
  '特长': "skill",
  '电话': "telephone",
  '地址': "address",
};
复制代码

格式化如下：

核心代码如下：

<script setup lang='ts'>
import { reactive, ref } from "vue";
import * as XLSX from "xlsx";
const excelNameToKey = {
  姓名: "name",
  年龄: "age",
  特长: "skill",
  电话: "telephone",
  地址: "address",
};
interface Props {
  accept: string;
}
const props = withDefaults(defineProps<Props>(), {
  accept:
    ".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
});
const excelRef: any = ref(null);
const excelData: any[] = reactive([]);
const clearFile = () => {
  excelRef.value.value = "";
};
// 标准化 JSON 数据
const excelDataToJson = (sheetJson: any[]) => {
  if (!sheetJson.length) return;
  let result = sheetJson;
  const hasTableHead = !!sheetJson[0].__EMPTY;
  // 拥有表头的数据，需要取正确的值
  if (hasTableHead) {
    const header = sheetJson.shift();
    const data: any[] = [];
    Object.keys(header).forEach((key) => {
      sheetJson.forEach((item, index) => {
        const obj = data[index] || {};
        obj[header[key]] = item[key];
        data[index] = obj;
      });
    });
    console.log("【】【】", data);
    result = data;
  }
  // 将表格对应的文字转换为 key
  result.forEach((item) => {
    const newItem: any = {};
    Object.keys(item).forEach((key) => {
      newItem.title = key;
      newItem[excelNameToKey[key]] = item[key];
    });
    excelData.push(newItem);
  });
};
// 读取对应表格文件
const readerExcel = (file: File) => {
  const fileReader = new FileReader();
  // 以二进制的方式读取表格内容
  fileReader.readAsBinaryString(file);
  // 表格内容读取完成
  fileReader.onload = (event: any) => {
    try {
      const fileData = event.target.result;
      const workbook = XLSX.read(fileData, {
        type: "binary",
      });
      // 表格是有序列表，因此可以取多个 Sheet，这里取第一个 Sheet
      const wsname = workbook.SheetNames[0];
      // 将表格内容生成 json 数据
      const sheetJson = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
      console.log(sheetJson);
      // 标准化 JSON 数据
      excelDataToJson(sheetJson);
    } catch (e) {
      console.log(e);
      return false;
    }
  };
};
// 文件变化时触发
const onChange = (event) => {
  // 获取文件对象
  const file = event.target.files[0];
  // 读取文件内容
  readerExcel(file);
  // 清除数据
  clearFile();
};
</script>

给我实现一个前端的 Excel 导入和导出功能（一）

前言

Excel 解析为 JSON

基本内容

组件效果和结构

Excel 数据格式

实现 Excel 转 JSON 功能

核心步骤

效果演示

具体代码

格式化 JSON 数据

热门文章

最新文章

相关课程

相关电子书

相关实验场景