头图

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

前言

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

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

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

切图仔 B】: OK,试试 就 ~ Shi Shi ~

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

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

0F94B05E.gif

0F94B05E.gif

Excel 解析为 JSON

基本内容

组件效果和结构

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

0F94B05E.gif

<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 数据格式有两种,一种是 有表头说明 的,另一种是 无表头说明 的,具体内容如下:

  • 有表头说明
    0F94B05E.gif
  • 无表头说明
    0F94B05E.gif

    实现 Excel 转 JSON 功能

    核心步骤

  • 通过 FileReader 以二进制的方式读取 Excel 文件,即 fileReader.readAsBinaryString(file)
  • 将对应的二进制数据通过 `XLSX.read(fileData, {

      type: "binary"
    })` 方法生成 `workbook` 对象
  • workbook.SheetNames[0] 获取第一个 Sheet 的名称 wsname,因为表格是有序列表,因此可以有多个 Sheet

    image.png

  • 通过 XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) 方法将对应的 Sheet 内容转换为 JSON 数据

效果演示

  • 有表头说明

    0F94B05E.gif

    0F94B05E.gif

  • 无表头说明

    0F94B05E.gif
    0F94B05E.gif

具体代码

// 读取对应表格文件
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",
    };

    格式化如下:

    0F94B05E.gif

核心代码如下:

<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>

JSON 导出为 Excel

基本结构

页面内容也非常简单,具体如下:

0F94B05E.gif

<template>
  <div id="container">
    <h1>JSON 数据:</h1>
    <h2>
      <code>
        {{ jsonData }}
      </code>
    </h2>

    <button @click="exportExcel">导出 Excel</button>
  </div>
</template>

导出功能

导出其实也很简单,首先创建 src/utils/json2Excel.ts 文件里面就是具体导出的实现,具体内容如下:

// src/utils/json2Excel.ts

import * as XLSX from "xlsx";

export default (
  data: any[],
  sheetName: string = "sheet1",
  fileName: string = "json2Excel.xlsx"
) => {
  const jsonWorkSheet = XLSX.utils.json_to_sheet(data);
  
  const workBook = {
    SheetNames: [sheetName], // 指定有序 sheet 的 name
    Sheets: {
      [sheetName]: jsonWorkSheet, // 表格数据内容
    },
  };

  return XLSX.writeFile(workBook, fileName); // 向文件系统写出文件
};

然后在 App.vue 中使用,具体如下:

// src/App.vue

<script setup lang="ts">

import json2Excel from "./utils/json2Excel";

// 测试的 JSON 数据
const jsonData = [
  {
    name: "张三1",
    age: 18,
    skill: "干饭1",
    telephone: 20200825,
    address: "宇宙尽头1",
  },
  {
    name: "张三2",
    age: 19,
    skill: "干饭2",
    telephone: 20200826,
    address: "宇宙尽头2",
  },
  {
    name: "张三3",
    age: 20,
    skill: "干饭3",
    telephone: 20200827,
    address: "宇宙尽头3",
  },
  {
    name: "张三4",
    age: 21,
    skill: "干饭4",
    telephone: 20200828,
    address: "宇宙尽头4",
  },
  {
    name: "张三5",
    age: 22,
    skill: "干饭5",
    telephone: 20200829,
    address: "宇宙尽头5",
  },
  {
    name: "张三6",
    age: 23,
    skill: "干饭6",
    telephone: 20200830,
    address: "宇宙尽头6",
  },
  {
    name: "张三7",
    age: 24,
    skill: "干饭7",
    telephone: 20200831,
    address: "宇宙尽头7",
  },
  {
    name: "张三8",
    age: 25,
    skill: "干饭8",
    telephone: 20200832,
    address: "宇宙尽头8",
  },
  {
    name: "张三9",
    age: 26,
    skill: "干饭9",
    telephone: 20200833,
    address: "宇宙尽头9",
  },
  {
    name: "张三10",
    age: 27,
    skill: "干饭10",
    telephone: 20200834,
    address: "宇宙尽头10",
  },
];

// key -> name 的映射
const excelKeyToName = {
  name: "姓名",
  age: "年龄",
  skill: "特长",
  telephone: "电话",
  address: "地址",
};

// 导出 Excel 文件
const exportExcel = () => {
  // 格式化参数
  const data = jsonData.map((item) => {
    const newItem: any = {};
    Object.keys(item).forEach(key => {
      newItem[excelKeyToName[key]] = item[key];
    });
    return newItem;
  });
 
  // 导出 Excel
  json2Excel(data);
};
</script>

效果演示

0F94B05E.gif

最后

以上只是实现了简单的单个导入、导出功能,可以将其完善为 批量操作,但是要注意批量操作带来的耗时性,将对应的耗时部分通过 webworker 等方式处理,这样页面就不需要一直等待当前的操作完成。

另外,如果有要求在导出 Excel 时有表格样式(如:行列宽高设置等)可以通过 xlsx-populate 来实现。

以上就是本文的全部内容,希望上述内容可以给大家带来一些思路,可以在评论区贡献更优质的方案。

业精于勤立不易方,而后鹏程万里!

361 声望
97 粉丝
0 条评论
推荐阅读
HTTP,WebSocket 和 聊天室
在涉及到网络层面的相关内容时,不免会联系到 HTTP、TCP、WebSocket 等,但相信大部分人都并不是很清楚其中的一些关系和概念,特别是需要你去做语言表述时,网上有不少优秀的资料和文章,但知识仍需要自己去消化...

熊的猫5阅读 397

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木148阅读 12.2k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan43阅读 2.9k评论 14

封面图

业精于勤立不易方,而后鹏程万里!

361 声望
97 粉丝
宣传栏