前端常用的上传下载文件的几种方式,直接上传、下载文件,读取.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、你们公司的接口…...
UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码,而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库,可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画,可以包含在你的网页或应用项目中。 3.An…...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作:验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化:测试aof和aof持久化机制,确保数据在开启后正确恢复。 事务:检查事务的原子性和回滚机制。 发布订阅:确保消息正确传递。 2、性…...
Linux部署私有文件管理系统MinIO
最近需要用到一个文件管理服务,但是又不想花钱,所以就想着自己搭建一个,刚好我们用的一个开源框架已经集成了MinIO,所以就选了这个 我这边对文件服务性能要求不是太高,单机版就可以 安装非常简单,几个命令就…...
AD学习(3)
1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分: (1)PCB焊盘:表层的铜 ,top层的铜 (2)管脚序号:用来关联原理图中的管脚的序号,原理图的序号需要和PCB封装一一…...
