前端常用的上传下载文件的几种方式,直接上传、下载文件,读取.xlsx文件数据,导出.xlsx数据
一、通过调用接口下载文件
const onExport = async () => {try {let res = await axios.request({method: 'POST',url: '请求地址',responseType: 'blob',params: { data: null },headers: { Authorization: 'Bearer ' + UserModule.token },//看看请求是否需要token});let reader = new FileReader();let data = res.data;reader.onload = (e: any) => {try {let fileName = window.decodeURI(decodeURIComponent(decodeURI(res.headers['content-disposition'].split(`''`)[1])));let url = window.URL.createObjectURL(new Blob([data], { type: res.headers['content-type'] }));let link = document.createElement('a');link.style.display = 'none';link.href = url;link.setAttribute('download', fileName);document.body.appendChild(link);link.click();document.body.removeChild(link);} catch (e: any) {message.error(e);}};reader.readAsText(data);} catch (err) {message.error('导出失败');}
};
二、将数组的对象数据导出到.xlsx文件中
fnExport() {let data = [];let temp = [{name:'小周',sex:'男',nation:'汉族'},{name:'小林',sex:'女',nation:'汉族'},]temp.forEach((item: models.ExpertEditModel) => {data.push({姓名: item.name,性别: item.sex,民族: item.nation,});});const ws = XLSX.utils.json_to_sheet(data);// 新建bookconst wb = XLSX.utils.book_new();// 生成xlsx文件(book,sheet数据,sheet命名)XLSX.utils.book_append_sheet(wb, ws, '数据详情');// 写文件(book,xlsx文件名称)XLSX.writeFile(wb, '基本信息.xlsx');}
三、请求接口上传文件给后端
async beforeAvatarUpload(file: any, fList: any) {if (!file) {this.$message.error('请先添加文件');} else {if (file) {try {const formData = new FormData();formData.append('file', file);//await api.Organizations.EduUploadSchool_PostAsync(formData);// 发起POST请求axios.request({method: 'post',url: 'your_backend_url',data: formData,headers: {'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,// You might need other headers depending on your backend requirements}})this.$message.success('上传成功');} catch (err) {this.$message.error('上传失败:' + err.message);}}}}
四、读取用户上传的.xlsx文件内容转成数组
html
<el-uploadaction=""accept=".xlsx":before-upload="getExcelFile"><el-button size="small" type="primary">点击上传</el-button></el-upload>
async getExcelFile(file) {if (!/\.(xlsx)$/.test(file.name.toLowerCase())) {console.log("请上传.xlsx格式的Excel文件");} else if (file) {try {const res = await this.readExcel(file);//调用解析.xlsx文件方法} catch (error) {console.log("上传错误:", error);}}},// 解析ExcelreadExcel(file) {return new Promise((resolve, reject) => {const reader = new FileReader();//创建FileReader对象,您可以将文件内容读取到内存中let getExcelList = [];// 用于存储从Excel中提取的数据reader.onload = (e) => {try {let data = e.target.result;let workbook = XLSX.read(data, { type: "binary" });// 遍历工作表for (let item in workbook.SheetNames) {let SheetName = workbook.SheetNames[item];let sheetInfos = workbook.Sheets[SheetName];// 将工作表内容转换为JSON格式let excel = XLSX.utils.sheet_to_json(sheetInfos, { raw: true });// 遍历每行数据并将特定字段添加到getExcelList数组中excel.forEach((item) => {getExcelList.push({name: item.姓名 ?? "",nation: item.民族 ?? "",school: item.学校 ?? "",});});}console.log("%c [ getExcelList ]-53","font-size:13px; background:pink; color:#bf2c9f;",getExcelList);resolve(getExcelList);// 成功解析并处理Excel文件,返回getExcelList数组} catch (e) {reject(e);}};// console.log('teacherUploadList', teacherUploadList);reader.readAsBinaryString(file);// 以二进制字符串形式读取上传的Excel文件内容,解析成功则调用reader.onload函数});}
相关文章:
前端常用的上传下载文件的几种方式,直接上传、下载文件,读取.xlsx文件数据,导出.xlsx数据
一、通过调用接口下载文件 const onExport async () > {try {let res await axios.request({method: POST,url: 请求地址,responseType: blob,params: { data: null },headers: { Authorization: Bearer UserModule.token },//看看请求是否需要token});let reader new…...
FPGA应用学习笔记--时钟域的控制 亚稳态的解决
时钟域就是同一个时钟的区域,体现在laways语句边缘触发语句中,设计规模增大就会导致时钟不同步,有时差,就要设计多时钟域。 会经过与门的延时产生的新时钟域,这种其实不推荐使用,但在ascl里面很常见 在处理…...
AirServer是什么软件,手机屏幕投屏电脑神器
什么是 AirServer? AirServer 是适用于 Mac 和 PC 的先进的屏幕镜像接收器。 它允许您接收 AirPlay 和 Google Cast 流,类似于 Apple TV 或 Chromecast 设备。AirServer 可以将一个简单的大屏幕或投影仪变成一个通用的屏幕镜像接收器 ,是一款…...
如何使用 AT+WEBSERVER 指令实现自定义的 Webserver html 网页配网
开启 AT 固件中的 Webserver 指令和 FS 指令支持 乐鑫官网发布的默认通用 AT 固件不支持 webserver 配网功能, 需要用户自己搭建 esp-at 环境,并在 sdkconfig 中开启 webserver AT 指令 和 FS 指令的支持, 如下图所示: 测试 AT 固…...
期权定价模型系列【4】—期权组合的Delta-Gamma-Vega中性
期权组合的Delta-Gamma-Vega中性 期权组合构建时往往会进行delta中性对冲,在进行中性对冲后,期权组合的delta敞口为0,此时期权组合仍然存在gamma与vega敞口。因此研究期权组合的delta-gamma-vega敞口中性是有必要的。 本文旨在对delta-gamma-…...
k8sday02
第四章 实战入门 本章节将介绍如何在kubernetes集群中部署一个nginx服务,并且能够对其进行访问。 Namespace Namespace是kubernetes系统中的一种非常重要资源,它的主要作用是用来实现多套环境的资源隔离或者多租户的资源隔离。 默认情况下&…...
黑马头条项目学习--Day2: app端文章查看,静态化freemarker,分布式文件系统minIO
app端文章 Day02: app端文章查看,静态化freemarker,分布式文件系统minIOa. app端文章列表查询1) 需求分析2) 实现思路 b. app端文章详细1) 需求分析2) Freemarker概述a) 基础语法种类b) 集合指令(List和Map)c) if指令d) 运算符e) 空值处理f) …...
特语云用Linux和MCSM面板搭建 我的世界基岩版插件服 教程
Linux系统 用MCSM和DockerWine 搭建 我的世界 LiteLoaderBDS 服务器 Minecraft Bedrock Edition 也就是我的世界基岩版,这是 Minecraft 的另一个版本。Minecraft 基岩版可以运行在 Win10、Android、iOS、XBox、switch。基岩版不能使用 Java 版的服务器,…...
2023.8
编译 make install 去掉 folly armv8-acrc arrow NEON 相关链接 https://blog.csdn.net/u011889952/article/details/118762819 这里面的方案二,我之前也是用的这个 https://blog.csdn.net/zzhongcy/article/details/105512565 参考的此博客 火焰图 https://b…...
CSV文件编辑器——Modern CSV for mac
Modern CSV for Mac是一款功能强大、操作简单的CSV文件编辑器,适用于Mac用户快速、高效地处理和管理CSV文件。Modern CSV具有直观的用户界面,可以轻松导入、编辑和导出CSV文件。它支持各种功能,包括排序、过滤、查找和替换,使您能…...
全国各地区数字经济工具变量-文本词频统计(2002-2023年)
数据简介:本数据使用全国各省工作报告,对其中数字经济相关的词汇进行词频统计,从而构建数字经济相关的工具变量。凭借数字经济政策供给与数字经济发展水平的相关系数的显著性作为二者匹配程度的划分依据,一定程度上规避了数字经济…...
MacOS安装RabbitMQ
官网地址: RabbitMQ: easy to use, flexible messaging and streaming — RabbitMQ 一、brew安装 brew update #更新一下homebrew brew install rabbitmq #安装rabbitMQ 安装结果: > Caveats > rabbitmq Management Plugin enabled by defa…...
关于selenium 元素定位的浅度解析
一、By类单一属性定位 元素名称 描述 Webdriver API id id属性 driver.find_element(By.ID, "id属性值") name name属性 driver.find_element(By.NAME, "name属性值") class_name class属性 driver.find_element(By.CLASS_NAME, "class_na…...
狐猬编程:货运
玩具厂生产了一批玩具需要运往美国销售。该批玩具根据大小,已经将其打包装在不同的包装盒里用以运输。该批玩具包装盒共有六个型号,分别1*1*h、2*2*h、3*3*h、4*4*h、5*5*h、6*6*h的包装盒。由于疫情的影响,运输价格十分昂贵,海运…...
SpringBoot复习:(34)@EnableWebMvc注解为什么让@WebMvcAutoconfiguration失效?
它导入了DelegatingWebMvcConfiguration 它会把容器中的类型为WebMvcConfigurer的bean注入到类型为WebMvcConfigurerComposite的成员变量configurers中。 可以看到它继承了WebMvcConfigurerSupport类 而WebMvcConfigureAutoConfiguration类定义如下 可以看到一个Conditional…...
批量将CSV文件转换为TXT文件
要批量将CSV文件转换为TXT文件,可以按照以下步骤进行操作: 1. 导入所需的Python库:首先,您需要导入csv库来读取CSV文件。 import csv 2. 定义文件路径和输出文件夹: input_folder "your_input_folder_path&q…...
vite跨域配置踩坑,postman链接后端接口正常,但是前端就是不能正常访问
问题一:怎么都链接不了后端地址 根据以下配置,发现怎么都链接不了后端地址,proxy对了呀。 仔细看,才发现host有问题 // 本地运行配置,及反向代理配置server: {host: 0,0,0,0,port: 80,// cors: true, // 默认启用并允…...
Java设计模式-抽象工厂(Abstract Factory)模式
说明 抽象工厂(Abstract Factory)模式是一种工厂模式。用一个接口类中的不同方法创建不同的产品。 为了便于理解,先打个比方: 将老虎、狮子、猴子比作三个抽象产品的接口类,也就是有3个产品等级。 老虎又分动物园的…...
Hive加密,PostgreSQL解密还原
当前公司数据平台使用的处理架构,由Hive进行大数据处理,然后将应用数据同步到PostgreSQL中做各类外围应用。由于部分数据涉及敏感信息,必须在Hive进行加密,然后在PG使用时再进行单个数据解密,并监控应用的数据调用事情…...
2023年测试岗,接口测试面试题汇总+答案,拿捏面试官...
目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、你们公司的接口…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先,你可以运行以下命令查看可用版本: apt-cache madison nginx-core输出示例: nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
Python爬虫实战:研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了,报错如下四、启动不了,解决如下 总结 问题原因 在应用中可以看到chrome,但是打不开(说明:原来的ubuntu系统出问题了,这个是备用的硬盘&a…...
PL0语法,分析器实现!
简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...
学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2
每日一言 今天的每一份坚持,都是在为未来积攒底气。 案例:OLED显示一个A 这边观察到一个点,怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 : 如果代码里信号切换太快(比如 SDA 刚变,SCL 立刻变&#…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)
Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习) 一、Aspose.PDF 简介二、说明(⚠️仅供学习与研究使用)三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
