1200字范文 > 前端实现 Excel 导入和导出功能

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

时间：2023-04-19 01:40:22

相关推荐

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

注意：Excel的导入、导出功能一般情况下都是服务端完成，这里只是记录一下前端实现方法，供小众场景使用。

这里的实现要依赖第三方库：xlsx。

兼容性：IE9+

安装 xlsx

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