前言

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

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

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

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

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

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

Excel 解析为 JSON

基本内容

组件效果和结构

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


### Excel 数据格式**`Excel`** 数据格式有两种，一种是 **有表头说明** 的，另一种是 **无表头说明** 的，具体内容如下：* **有表头说明**<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ae907cd0b6f461da9560e4fca1ec32e~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?" style="margin: auto" />
* **无表头说明**<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/320d6d696370430eb49e0d6b6e7f2c15~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?" style="margin: auto" />实现 Excel 转 JSON 功能
------------------### 核心步骤* 通过 `FileReader` 以二进制的方式读取 `Excel` 文件，即 `fileReader.readAsBinaryString(file)`* 将对应的二进制数据通过 `XLSX.read(fileData, { type: "binary" })` 方法生成 `workbook` 对象* `workbook.SheetNames[0]` 获取第一个 `Sheet` 的名称 `wsname`，因为表格是有序列表，因此可以有多个 `Sheet`<img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b212194acd2845c885764ebdcf15fda2~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)* 通过 `XLSX.utils.sheet_to_json(workbook.Sheets[wsname])` 方法将对应的 `Sheet` 内容转换为 `JSON` 数据### 效果演" style="margin: auto" />* **有表头说明**<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/17bb66e17cba4018a8fd097accf6f352~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?) ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3064b64aa0134d85ae2c66550fb72e00~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?" style="margin: auto" />
* **无表头说明**<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/72fd47c5d82b4efb936f5b9f98486440~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?) ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/93c709390f1f4d339a259dbc46dce83d~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?" style="margin: auto" />### 具体代码

// 读取对应表格文件
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，这里取第一个 Sheetconst 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",}; ```**格式化如下：**<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31ff6d40f6984d1e85a64854dfb18d45~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?" style="margin: auto" />**核心代码如下：**


JSON 导出为 Excel
==============基本结构
----页面内容也非常简单，具体如下：<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca0648a760bb4834a6e1cee3ba03f38a~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)``" style="margin: auto" />
<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.tsimport * 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 的 nameSheets: {[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;});// 导出 Exceljson2Excel(data);
};
</script>

效果演示

最后

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

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

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

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。

有需要的小伙伴，可以点击下方卡片领取，无偿分享

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

可以实现一个前端的 Excel 导入和导出功能吗？
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流前言 [**负责人 A]:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果 ...
【实战】1467- 实现一个前端的 Excel 导入和导出功能
前言 [**负责人 A]:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!** [**切图仔 B**]:接口这边不能优化一下吗?比如 ...
前端实现 Excel 导入和导出功能
注意:Excel的导入.导出功能一般情况下都是服务端完成,这里只是记录一下前端实现方法,供小众场景使用. 这里的实现要依赖第三方库:xlsx. 兼容性:IE9+ 安装 xlsx npm i -S ht ...
移动端excel导出_前端实现Excel导入和导出功能
介绍最近项目中让实现一个导入导出Excel的功能,查找了一些插件后发现js-xlsx这个插件,所以就尝试使用了一下,这里将使用方法和遇到的问题简单记录一下. SheetJS js-xlsx 是一款能 ...
使用POI和EasyExcel实现Excel导入和导出功能
需求场景开发中经常会设计到excel的处理,需求场景如下所示: 1.将用户信息导出为excel表格(导出数据) 2.将Excel表中的信息录入到数据库中(导入数据) 操作Excel目前比较流行的就是 ...
动态列表的excel导入、导出功能（二）
项目场景: 最近做到一个业务需求是,要做一个物品管理页面的excel模板导出,导出的excel信息填充后做导入使用问题描述: 接着上次做出的'半动态导出'功能后,开始编写相应的导入功能,一开始思路没 ...
使用node-xlsx组件实现excel导入和导出功能
导入 1.npm install node-xlsx 模块 2.obj得到的就是excel的json数据,想怎么用就怎么用 let xlsx = require('node-xlsx');let ...
html如何自动导入excel,Javascript 实现 Excel 导入生成图表功能
前一段时间做了一个用 JS 实现图表显示的功能,加上这次的Excel 导入功能,最终的效果是这样的: 怎么样?如果看了心动的话,就接着往下看吧. 本次的这个设计需要用到几个插件:jquery.js.x ...
Java解析xml文件dom4j篇(基于xml配置文件完成Excel数据的导入、导出功能完整实现)
DOM4J解析XML文件 dom4j是一个Java的XML API,是jdom的升级产品,用来读写XML文件.另外对比其他API读写XML文件,dom4j是一个十分优秀的JavaXML API,具有性 ...

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

前言