前端使用xlsx.js实现 Excel 文件的导入与导出功能

前端使用xlsx.js实现 Excel 文件的导入与导出功能

在现代的 Web 开发中,处理文件上传和导出功能已经变得越来越常见,尤其是 Excel 文件的导入与导出。

我们将使用 Vue.js 和 XLSX.js 库来处理 Excel 文件的读取生成。XLSX.js 是一个强大的 JavaScript 库,可以在浏览器中解析和生成 Excel 文件。以下是如何一步步实现这个功能的示例。

项目需求

  • 导入功能:允许用户上传 Excel 文件,并解析其内容。
  • 导出功能:允许用户将数据导出为 Excel 文件。

环境准备

首先,确保你已经在 Vue 项目中安装了 XLSX.js 库,可以通过以下命令来安装:

npm install xlsx

代码实现

在下面的代码中,我们展示了如何在 Vue 组件中实现 Excel 文件的导入和导出。

<template><div class="maintenance"><a-page-header style="border-bottom: 1px solid rgb(235, 237, 240)" :title="title"><template slot="extra"><a-button-group><a-button type="primary" icon="download" @click="handleExportExcelFile">导出excel</a-button></a-button-group><a-uploadaccept=".xlsx,.xls":disabled="isUploadingExcel":before-upload="beforeUpload":custom-request="customRequest":showUploadList="false"><a-button type="primary" :icon="isUploadingExcel ? 'loading' : 'plus'">导入excel</a-button></a-upload></template></a-page-header></div>
</template><script>
import * as XLSX from 'xlsx';export default {data() {return {title: 'Excel 文件处理',isUploadingExcel: false,pagination: {current: 1}};},methods: {// 初始化数据async fetchData() {this.isLoadingTableData = true;// 在这里你可以从 API 或其他来源加载数据this.isLoadingTableData = false;},// 搜索操作async handleSearch() {this.pagination.current = 1;this.fetchData();},/** 图片预览=============== */// 拦截上传操作,进行自定义处理customRequest({ file, onSuccess, onError }) {try {// 调用文件处理方法this.handleImportExcelFile(file);// 如果没有错误,调用 onSuccess 回调if (onSuccess) {onSuccess();}} catch (error) {// 如果发生错误,调用 onError 回调if (onError) {onError(error);}}},// 文件上传前的钩子函数beforeUpload(file) {const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';if (!isExcel) {this.$message.error('只能上传 Excel 文件!');}return isExcel;},// 处理导入的 Excel 文件handleImportExcelFile(file) {this.isUploadingExcel = true;const reader = new FileReader();reader.onload = e => {const data = e.target.result;const workbook = XLSX.read(data, { type: 'binary' });// 读取第一个工作表const sheetName = workbook.SheetNames[0];const worksheet = workbook.Sheets[sheetName];// 将工作表转换为 JSON 数据const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });this.isUploadingExcel = false;console.log(jsonData);// 你可以在这里将 jsonData 保存到组件的 data 中// this.excelData = jsonData;};reader.readAsBinaryString(file);},// 导出 Excel 文件handleExportExcelFile() {const data = [['Name', 'Age'],['Alice', 20],['Bob', 25]];// 将数据转换为工作表const ws = XLSX.utils.aoa_to_sheet(data);const wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');// 导出文件XLSX.writeFile(wb, 'output.xlsx');}},created() {},async mounted() {this.fetchData();}
};
</script>

代码讲解

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet:这是 Excel 2007 及以后版本(.xlsx 文件)的 MIME 类型,用于表示基于 Open XML 格式的电子表格。
application/vnd.ms-excel:这是 Excel 97-2003 版本(.xls 文件)的 MIME 类型,表示旧版 Excel 格式的电子表格。
1. 组件结构

在 Vue 模板中,我们使用了 a-page-headera-button-group 来显示页面头部和操作按钮。主要操作按钮包括:

  • 导出 Excel 按钮:点击时触发 handleExportExcelFile 方法。
  • 导入 Excel 按钮:使用 Ant Design Vue 的 a-upload 组件来上传文件。
2. 导入 Excel 文件
  • beforeUpload:在上传文件之前,我们先判断文件类型,确保它是 Excel 文件。如果不是,会显示错误消息。
  • customRequest:这是上传自定义请求的钩子函数,它会在上传过程中调用 handleImportExcelFile 方法来处理文件。
  • handleImportExcelFile:当文件上传完成后,我们使用 FileReader 读取文件内容,并利用 XLSX.read 方法解析 Excel 文件。然后,我们将第一个工作表的数据转换成 JSON 格式,可以进一步处理或展示这些数据。
3. 导出 Excel 文件
  • handleExportExcelFile:通过 XLSX.utils.aoa_to_sheet 方法,我们将一个二维数组转换成 Excel 工作表对象,接着用 XLSX.writeFile 方法将其导出为 output.xlsx 文件。
4. 上传与导出按钮的显示与隐藏
  • isUploadingExcel 变量用来控制上传按钮的加载状态,在文件上传过程中会显示一个加载动画,防止用户重复上传文件。
5. 分页与搜索功能
  • 代码中提供了分页与搜索框架,虽然具体的分页和搜索实现未展示,但你可以根据自己的需求,进一步扩展数据请求与展示功能。
6.XLSX.utils.sheet_to_json() 方法

改方法是 xlsx 库用来将 Excel 工作表转换成 JSON 数据的函数。header 属性用来指定如何处理工作表的第一行(通常是列标题)以及如何映射到 JSON 对象的属性名。

header 属性的含义:
  1. header: 1:

    • 这表示将第一行数据作为数组的元素,而不是作为对象的键。
    • 即,转换结果将是一个二维数组,每一行是一个数组。第一行会作为数据的首行,而不是作为字段名称。
    • 适用于当你想直接操作原始数据时。

    示例:

    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
    console.log(jsonData);
    

    假设 Excel 中的工作表内容如下:

    姓名年龄性别
    张三25
    李四30

    输出的 jsonData 将是:

    [['姓名', '年龄', '性别'],['张三', 25, '男'],['李四', 30, '女']
    ]
    
  2. header: 'A' (或者其他字符串值):

    • header 设置为字符时,表示工作表的列头应该被视为从字母 “A” 开始。
    • 这样,每一列会被命名为字符(例如 'A', 'B', 'C'),并用于数据对象的属性名。

    示例:

    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 'A' });
    console.log(jsonData);
    

    对于相同的工作表数据,输出将是:

    [{ A: '张三', B: 25, C: '男' },{ A: '李四', B: 30, C: '女' }
    ]
    
  3. header: [] (数组形式):

    • 如果你传递一个数组作为 header,那么这个数组将被用作 JSON 数据的字段名称。

    示例:

    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: ['姓名', '年龄', '性别'] });
    console.log(jsonData);
    

    输出将是:

    [{ 姓名: '张三', 年龄: 25, 性别: '男' },{ 姓名: '李四', 年龄: 30, 性别: '女' }
    ]
    
  4. header: true:

    • 如果 header 设置为 true,则 sheet_to_json 方法会自动使用工作表的第一行作为属性名。

    示例:

    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: true });
    console.log(jsonData);
    

    输出将是:

    [{ 姓名: '张三', 年龄: 25, 性别: '男' },{ 姓名: '李四', 年龄: 30, 性别: '女' }
    ]
    

这里,sheet_to_json() 会自动识别第一行(['姓名', '年龄', '性别'])作为字段名,并将其应用到每一行的数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/64657.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

02-9.python入门基础一Python模块与包(一)

一、Python 模块的概念 &#xff08;一&#xff09;模块的基本定义 在 Python 中&#xff0c;模块&#xff08;Module&#xff09;是一种组织代码的基本单元&#xff0c;简单来说&#xff0c;一个以 .py 结尾的 Python 文件就是一个模块。例如&#xff0c;我们创建一个名为 ex…

当我用影刀AI Power做了一个旅游攻略小助手

在线体验地址&#xff1a;旅游攻略小助手https://power.yingdao.com/assistant/ca1dfe1c-9451-450e-a5f1-d270e938a3ad/share 运行效果图展示&#xff1a; 话不多说一起看下效果图&#xff1a; 智能体的截图&#xff1a; 工作流截图&#xff1a; 搭建逻辑&#xff1a; 其实这…

Apache Tomcat 漏洞CVE-2024-50379条件竞争文件上传漏洞 servlet readonly spring boot 修复方式

1&#xff0c;关于漏洞 Apache Tomcat是一个流行的开源 Web 服务器和 Java Servlet 容器。 二、 漏洞描述 Apache Tomcat中修复了个 TOCTOU 竞争条件远程代码执行漏洞 (CVE-2024-50379)&#xff0c;该漏洞的 CVSS 评分为 9.8。Apache Tomcat 中 JSP 编译期间存在检查时间使用时…

AI Agent与MEME:技术与文化融合驱动Web3创新

AI Agent如何引领Web3新时代&#xff1f; 随着Web3与区块链技术的迅速发展&#xff0c;AI Agent作为人工智能与区块链的交汇点&#xff0c;正在逐步成为推动去中心化生态的重要力量。同时&#xff0c;MEME文化凭借其强大的社区驱动力和文化渗透力&#xff0c;在链上生态中扮演着…

EasyExcel 导出文件

EasyExcel 导出文件 EasyExcel导出文件,并解决格式报错 项目中使用EasyExcel导出数据 EasyExcel导出数据 引入pom文件 <!-- easy-excel --> <dependency><groupId>com.alibaba</groupId></

本科阶段最后一次竞赛Vlog——2024年智能车大赛智慧医疗组准备全过程——11上位机与小车交互

本科阶段最后一次竞赛Vlog——2024年智能车大赛智慧医疗组准备全过程——11上位机与小车交互 ​ 根据上一节的配置&#xff0c;目前已经建立了通讯环境&#xff0c;接下来给大家带来上位机与小车交互 这一章节里面也有图片大家去地瓜开发者社区看对应文章吧链接

【STM32 Modbus编程】-作为主设备写入多个线圈和寄存器

作为主设备写入多个线圈和寄存器 文章目录 作为主设备写入多个线圈和寄存器1、硬件准备与连接1.1 RS485模块介绍1.2 硬件配置与接线1.3 软件准备2、写入多个线圈2.1 数据格式2.2 发送数据2.3 结果3、写入多个寄存器3.1 数据格式3.2 发送数据3.3 结果本文将实现STM32作为ModBus主…

使用二分查找法找出给定点距离给定点集合距离最近的点

1、场景描述 给定点Point A &#xff08;x,y&#xff09;和 直线点集合 Points [(x1,y1),(x2,y2),(x3,y3),(x4,y4),(x5,y5)......],计算出集合中距离点A最近的一个点 &#xff08;如果集合中的两个点距离A点最近且相等&#xff0c;则只取其中一个&#xff09; 2、代码&#x…

经济学 ppt 2 部分

前言 上一次复习经济学是好久之前了&#xff0c;看了第一章的 ppt &#xff0c;好像重点就是谁是软件经济学之父。昨天老师讲了一下题型&#xff0c;20 分选择题&#xff0c; 20 分判断题&#xff0c;20 分计算题&#xff0c;6 6 8 三个计算题&#xff0c;25 分表格&#xff0…

winform中屏蔽双击最大化或最小化窗体(C#实现),禁用任务管理器结束程序,在需要屏蔽双击窗体最大化、最小化、关闭

winform中屏蔽双击最大化或最小化窗体(C#实现)&#xff0c;禁用任务管理器结束程序,在需要屏蔽双击窗体最大化、最小化、关闭 protected override void WndProc(ref Message m){#region 处理点击窗体标题栏放大缩小问题&#xff0c;禁用点击窗体标题栏放大缩小//logger.Info($&…

【SolidWorks转URDF】ROS学习笔记

一、环境配置 软件版本&#xff1a;SolidWorks 2022 SP3.1 Premium 转换插件版本&#xff1a;sw2urdfSetup2021.exe 对硬件有一定要求&#xff0c;需要独立显卡&#xff0c;显存大一点&#xff0c;否则会很卡。 二、文件转换 SolidWorks中的零部件和装配体对应URDF文件中的…

Spring学习之——Sping-XML

一、Spring的概述 (一)什么是Spring? Spring是针对bean对象的生命周期进行管理的轻量级容器。提供了功能强大IOC、AOP及Web MVC等功能。Spring框架主要由七部分组成&#xff1a;分别是 Spring Core、 Spring AOP、 Spring ORM、 Spring DAO、Spring Context、 Spring Web和 S…

电商商品详情API接口(item get)数据分析上货

电商商品详情API接口&#xff08;item get&#xff09;在数据分析与商品上货方面发挥着重要作用。以下是对这两个方面的详细探讨&#xff1a; 一、数据分析 数据源获取&#xff1a; 商品详情API接口提供了丰富的数据源&#xff0c;包括商品的标题、价格、库存、描述、图片、用…

EasyGBS国标GB28181平台P2P远程访问故障排查指南:客户端角度的排查思路

在现代视频监控系统中&#xff0c;P2P&#xff08;点对点&#xff09;技术因其便捷性和高效性而被广泛应用。然而&#xff0c;当用户在使用P2P远程访问时遇到设备不在线或无法访问的问题时&#xff0c;有效的排查方法显得尤为重要。本文将从客户端的角度出发&#xff0c;详细探…

win11 C盘出现感叹号解决方法

出现感叹号&#xff0c;原因是对C盘进行了BitLocker驱动器加密操作。如果想去除感叹号&#xff0c;对C盘进行BitLocker解密即可。 步骤如下&#xff1a; 1.点击Windows搜索框 2.搜索框内输入 系统 3.按下回车&#xff0c;进入系统界面 4.点击隐私和安全性 点击BitLocker驱…

学习threejs,scene.overrideMaterial全局材质效果

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.2 ☘️THREE.Scene 场景1.2 ☘️…

GTID详解

概念和组成 1&#xff0c;全局事务表示&#xff1a;global transaction identifiers 2, GTID和事务一一对应&#xff0c;并且全局唯一 3&#xff0c;一个GTID在一个服务器上只执行一次 4&#xff0c;mysql 5.6.5开始支持 组成 GTID server_uuid:transaction_id 如&#xf…

面试题整理4----lvs,nginx,haproxy区别和使用场景

LVS、Nginx、HAProxy&#xff1a;区别与使用场景 1. LVS&#xff08;Linux Virtual Server&#xff09;1.1 介绍1.2 特点1.3 使用场景 2. Nginx2.1 介绍2.2 特点2.3 使用场景 3. HAProxy3.1 介绍3.2 特点3.3 使用场景 4. 总结对比 在构建高可用、高性能的网络服务时&#xff0c…

prober.php探针

raw.githubusercontent.com/kmvan/x-prober/master/dist/prober.php

拦截器魔法:Spring MVC中的防重放守护者

目录 简介HandlerInterceptorAdapter vs HandlerInterceptor创建一个防重放拦截器注册拦截器路径模式匹配适配器模式的魅力总结 简介 在构建安全可靠的Web应用程序时&#xff0c;防止请求重放攻击是一项关键任务。当用户或系统发出的请求被恶意第三方捕获并重复发送给服务器…