安装 xlsx

npm i -S https://cdn.sheetjs.com/xlsx-0.18.12/xlsx-0.18.12.tgz

基本内容

组件效果和结构

Excel 数据格式

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

有表头说明

无表头说明

实现 Excel 转 JSON 功能

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

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

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

功能实现完整代码：

<template><inputtype="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";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;}// 将表格对应的文字转换为 keyresult.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，这里取第一个 Sheetconst 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

基本结构

// 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); // 向文件系统写出文件
};

<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",},
];// 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 来实现。

转载：给我实现一个前端的 Excel 导入和导出功能 - 掘金

前端实现 Excel 导入和导出功能相关推荐

可以实现一个前端的 Excel 导入和导出功能吗？
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流前言 [**负责人 A]:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果 ...
【实战】1467- 实现一个前端的 Excel 导入和导出功能
前言 [**负责人 A]:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!** [**切图仔 B**]:接口这边不能优化一下吗?比如 ...
给我实现一个前端的 Excel 导入和导出功能
前言 [负责人 A]:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果! [切图仔 B]: 接口这边不能优化一下吗?比如排查下慢的原因 ...
移动端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 ...
Java解析xml文件dom4j篇(基于xml配置文件完成Excel数据的导入、导出功能完整实现)
DOM4J解析XML文件 dom4j是一个Java的XML API,是jdom的升级产品,用来读写XML文件.另外对比其他API读写XML文件,dom4j是一个十分优秀的JavaXML API,具有性 ...
高质量实现单文件导入、导出功能（使用EasyExcel ）
前言咋说呢,最近交接了一个XXX统计分析系统到我手上,显示页面平平无其,一看导入.导出功能的实现代码,每个小菜单目录里面都对应一个导入导出接口,看起来十分难受!(此处省略1w字内心os)正所谓前人栽 ...

前端实现 Excel 导入和导出功能