当前位置: 首页 > news >正文

前端常用的上传下载文件的几种方式,直接上传、下载文件,读取.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应用学习笔记--时钟域的控制 亚稳态的解决

时钟域就是同一个时钟的区域&#xff0c;体现在laways语句边缘触发语句中&#xff0c;设计规模增大就会导致时钟不同步&#xff0c;有时差&#xff0c;就要设计多时钟域。 会经过与门的延时产生的新时钟域&#xff0c;这种其实不推荐使用&#xff0c;但在ascl里面很常见 在处理…...

AirServer是什么软件,手机屏幕投屏电脑神器

什么是 AirServer&#xff1f; AirServer 是适用于 Mac 和 PC 的先进的屏幕镜像接收器。 它允许您接收 AirPlay 和 Google Cast 流&#xff0c;类似于 Apple TV 或 Chromecast 设备。AirServer 可以将一个简单的大屏幕或投影仪变成一个通用的屏幕镜像接收器 &#xff0c;是一款…...

如何使用 AT+WEBSERVER 指令实现自定义的 Webserver html 网页配网

开启 AT 固件中的 Webserver 指令和 FS 指令支持 乐鑫官网发布的默认通用 AT 固件不支持 webserver 配网功能&#xff0c; 需要用户自己搭建 esp-at 环境&#xff0c;并在 sdkconfig 中开启 webserver AT 指令 和 FS 指令的支持&#xff0c; 如下图所示&#xff1a; 测试 AT 固…...

期权定价模型系列【4】—期权组合的Delta-Gamma-Vega中性

期权组合的Delta-Gamma-Vega中性 期权组合构建时往往会进行delta中性对冲&#xff0c;在进行中性对冲后&#xff0c;期权组合的delta敞口为0&#xff0c;此时期权组合仍然存在gamma与vega敞口。因此研究期权组合的delta-gamma-vega敞口中性是有必要的。 本文旨在对delta-gamma-…...

k8sday02

第四章 实战入门 本章节将介绍如何在kubernetes集群中部署一个nginx服务&#xff0c;并且能够对其进行访问。 Namespace ​ Namespace是kubernetes系统中的一种非常重要资源&#xff0c;它的主要作用是用来实现多套环境的资源隔离或者多租户的资源隔离。 ​ 默认情况下&…...

黑马头条项目学习--Day2: app端文章查看,静态化freemarker,分布式文件系统minIO

app端文章 Day02: app端文章查看&#xff0c;静态化freemarker,分布式文件系统minIOa. app端文章列表查询1) 需求分析2) 实现思路 b. app端文章详细1) 需求分析2) Freemarker概述a) 基础语法种类b) 集合指令&#xff08;List和Map&#xff09;c) if指令d) 运算符e) 空值处理f) …...

特语云用Linux和MCSM面板搭建 我的世界基岩版插件服 教程

Linux系统 用MCSM和DockerWine 搭建 我的世界 LiteLoaderBDS 服务器 Minecraft Bedrock Edition 也就是我的世界基岩版&#xff0c;这是 Minecraft 的另一个版本。Minecraft 基岩版可以运行在 Win10、Android、iOS、XBox、switch。基岩版不能使用 Java 版的服务器&#xff0c;…...

2023.8

编译 make install 去掉 folly armv8-acrc arrow NEON 相关链接 https://blog.csdn.net/u011889952/article/details/118762819 这里面的方案二&#xff0c;我之前也是用的这个 https://blog.csdn.net/zzhongcy/article/details/105512565 参考的此博客 火焰图 https://b…...

CSV文件编辑器——Modern CSV for mac

Modern CSV for Mac是一款功能强大、操作简单的CSV文件编辑器&#xff0c;适用于Mac用户快速、高效地处理和管理CSV文件。Modern CSV具有直观的用户界面&#xff0c;可以轻松导入、编辑和导出CSV文件。它支持各种功能&#xff0c;包括排序、过滤、查找和替换&#xff0c;使您能…...

全国各地区数字经济工具变量-文本词频统计(2002-2023年)

数据简介&#xff1a;本数据使用全国各省工作报告&#xff0c;对其中数字经济相关的词汇进行词频统计&#xff0c;从而构建数字经济相关的工具变量。凭借数字经济政策供给与数字经济发展水平的相关系数的显著性作为二者匹配程度的划分依据&#xff0c;一定程度上规避了数字经济…...

MacOS安装RabbitMQ

官网地址&#xff1a; RabbitMQ: easy to use, flexible messaging and streaming — RabbitMQ 一、brew安装 brew update #更新一下homebrew brew install rabbitmq #安装rabbitMQ 安装结果&#xff1a; > 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…...

狐猬编程:货运

玩具厂生产了一批玩具需要运往美国销售。该批玩具根据大小&#xff0c;已经将其打包装在不同的包装盒里用以运输。该批玩具包装盒共有六个型号&#xff0c;分别1*1*h、2*2*h、3*3*h、4*4*h、5*5*h、6*6*h的包装盒。由于疫情的影响&#xff0c;运输价格十分昂贵&#xff0c;海运…...

SpringBoot复习:(34)@EnableWebMvc注解为什么让@WebMvcAutoconfiguration失效?

它导入了DelegatingWebMvcConfiguration 它会把容器中的类型为WebMvcConfigurer的bean注入到类型为WebMvcConfigurerComposite的成员变量configurers中。 可以看到它继承了WebMvcConfigurerSupport类 而WebMvcConfigureAutoConfiguration类定义如下 可以看到一个Conditional…...

批量将CSV文件转换为TXT文件

要批量将CSV文件转换为TXT文件&#xff0c;可以按照以下步骤进行操作&#xff1a; 1. 导入所需的Python库&#xff1a;首先&#xff0c;您需要导入csv库来读取CSV文件。 import csv 2. 定义文件路径和输出文件夹&#xff1a; input_folder "your_input_folder_path&q…...

vite跨域配置踩坑,postman链接后端接口正常,但是前端就是不能正常访问

问题一&#xff1a;怎么都链接不了后端地址 根据以下配置&#xff0c;发现怎么都链接不了后端地址&#xff0c;proxy对了呀。 仔细看&#xff0c;才发现host有问题 // 本地运行配置&#xff0c;及反向代理配置server: {host: 0,0,0,0,port: 80,// cors: true, // 默认启用并允…...

Java设计模式-抽象工厂(Abstract Factory)模式

说明 抽象工厂&#xff08;Abstract Factory&#xff09;模式是一种工厂模式。用一个接口类中的不同方法创建不同的产品。 为了便于理解&#xff0c;先打个比方&#xff1a; 将老虎、狮子、猴子比作三个抽象产品的接口类&#xff0c;也就是有3个产品等级。 老虎又分动物园的…...

Hive加密,PostgreSQL解密还原

当前公司数据平台使用的处理架构&#xff0c;由Hive进行大数据处理&#xff0c;然后将应用数据同步到PostgreSQL中做各类外围应用。由于部分数据涉及敏感信息&#xff0c;必须在Hive进行加密&#xff0c;然后在PG使用时再进行单个数据解密&#xff0c;并监控应用的数据调用事情…...

2023年测试岗,接口测试面试题汇总+答案,拿捏面试官...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、你们公司的接口…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...