根据传入的文件流链接实现前端下载

后端传入一个下载的url,实现点击按钮,下载文件。

方式一:

通过window.open(“URL”, '_blank') 方式

PS:会打开一个新的页面

import React from 'react';const DownloadButton = () => {// window.open("URL", "_blank") 会在 新标签页 或 新窗口 中打开指定的 URLreturn (<button onClick={() => {window.open("URL","_blank")}}>Download File</button>);
};export default DownloadButton;

方式二:

创建一个标签,设置其href,实现下载:

import React from 'react';const DownloadButton = () => {const handleDownload = () => {const url = 'https://example.com/file-to-download'; // 替换为你的下载链接const a = document.createElement('a');a.href = url;a.download = ''; // 如果提供文件名,可以在这里设置,如 a.download = 'filename.ext';document.body.appendChild(a);a.click();document.body.removeChild(a); // 点击之后删除这个元素};return (<button onClick={handleDownload}>Download File</button>);
};export default DownloadButton;

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

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

相关文章

Http 协议和 RPC 协议有什么区别?

Http 协议和 RPC 协议有什么区别&#xff1f; 三个层面来述说&#xff1a; 从功能特性来说&#xff1a; HTTP是一个属于应用层的超文本传输协议&#xff0c;是万维网数据通信的基础&#xff0c;主要服务在网页端和服务端的数据传输上。 RPC是一个远程过程调用协议&#xff0…

AI+视频监控:EasyCVR安防平台赋能火电制造行业的视频智能管理方案

随着信息技术的飞速发展和智能制造的深入推进&#xff0c;火电制造行业作为国民经济的重要组成部分&#xff0c;正面临着智能化转型的迫切需求。为了提升生产效率、保障设备安全、优化管理流程&#xff0c;火电制造企业迫切需要引入先进的视频监控与人工智能技术。EasyCVR安防监…

TinyOS 点对基站通信

文章目录 一、前言1.1 发包的BlinkToRadio的数据包格式 二、混淆基站源码分析2.1 Makefile2.2 组件连接2.3 主逻辑代码 一、前言 1.1 发包的BlinkToRadio的数据包格式 如下&#xff0c;注意&#xff1a;AM层类型(1byte)即handlerID使可以在组件中修改的。 二、混淆基站源码…

《安富莱嵌入式周报》第343期:雷电USB4开源示波器正式发布,卓越的模拟前端低噪便携示波器,自带100W电源的便携智能烙铁,NASA航空航天锂电池设计

周报汇总地址&#xff1a;嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 更新一期视频教程 【授人以渔】CMSIS-RTOS V2封装层专题视频&#xff0c;一期视频将常用配置和用法梳理清楚&#xff0…

【Mybatis篇】Mybatis的注解开发

&#x1f9f8;安清h&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;【计算机网络】&#xff0c;【Mybatis篇】 &#x1f6a6;作者简介&#xff1a;一个有趣爱睡觉的intp&#xff0c;期待和更多人分享自己所学知识的真诚大学生。 文章目录 &#x1f3af; Select注解 …

自动猫砂盆有必要买吗?高性价比的自动猫砂盆怎么选通通看这篇

最近市面上又新出了很多款式的自动猫砂盆&#xff0c;有些铲屎官蠢蠢欲动&#xff0c;但又在犹豫&#xff0c;自己真的需要自动猫砂盆吗&#xff1f;作为养猫4年的资深铲屎官&#xff0c;在买过这么多猫咪智能用品的里面&#xff0c;最不后悔的就是自动猫砂盆了&#xff01;要知…

【北京迅为】《STM32MP157开发板嵌入式开发指南》-第二十五章 Source Insight 的安装和使用

iTOP-STM32MP157开发板采用ST推出的双核cortex-A7单核cortex-M4异构处理器&#xff0c;既可用Linux、又可以用于STM32单片机开发。开发板采用核心板底板结构&#xff0c;主频650M、1G内存、8G存储&#xff0c;核心板采用工业级板对板连接器&#xff0c;高可靠&#xff0c;牢固耐…

ElasticSearch备考 -- Multi match

一、题目 索引task有3个字段a、b、c&#xff0c;写一个查询去匹配这三个字段为mom&#xff0c;其中b的字段评分比a、c字段大一倍&#xff0c;将他们的分数相加作为最后的总分数 二、思考 通过题目要求对多个字段进行匹配查询&#xff0c;可以考虑multi match、bool query操作。…

RabbitMQ的相关题

一、 MQ的作⽤及应⽤场景 类似问题: 项⽬什么场景下使⽤到了MQ, 为什么需要MQ? RabbitMQ 的作⽤?使⽤场景有哪些? RabbitMQ…

【JWT安全】portswigger JWT labs 全解

目录 1.利用有缺陷的 JWT 签名验证 ①接受任意签名 lab1:通过未验证的签名绕过 JWT 身份验证 ②接受无签名的token lab2:通过有缺陷的签名验证来绕过 JWT 身份验证 2.暴力破解密钥 ①使用hashcat lab3:通过弱签名密钥绕过 JWT 身份验证 3.JWT 标头参数注入 ①通过 jwk…

多模态大语言模型(MLLM)-InstructBlip深度解读

前言 InstructBlip可以理解为Blip2的升级版&#xff0c;重点加强了图文对话的能力。 模型结构和Blip2没差别&#xff0c;主要在数据集收集、数据集配比、指令微调等方面下文章。 创新点 数据集收集&#xff1a; 将26个公开数据集转换为指令微调格式&#xff0c;并将它们归类…

大数据新视界 --大数据大厂之 GraphQL 在大数据查询中的创新应用:优化数据获取效率

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

线程安全-原子性,可见性,有序性

原子性 一组操作要执行就都执行&#xff0c;不执行就都不执行。 怎么保证原子性 synchronized 关键字&#xff0c;可以保证只有一个线程持有锁&#xff0c;进入代码块&#xff0c;因此在执行过程中不会被其他线程所干扰&#xff0c;从而保证原子性显示锁 Lock 接口的相关实现…

【C++】--类和对象(3)

&#x1f911;个人主页: 起名字真南 &#x1f911;个人专栏:【数据结构初阶】 【C语言】 【C】 目录 1 深入构造函数2 类型转换3 static成员4 友元函数5 内部类6 匿名对象 1 深入构造函数 之前我们实现构造函数的时候&#xff0c;初始化成员变量都是在函数体内赋值&#xff0c…

selenium有多个frame页时的操作方法(5)

之前文章我们提到&#xff0c;在webdriver.WebDriver类有一个switch_to方法&#xff0c;通过switch_to.frame()可以切换到不同的frame页然后才再定位某个元素做一些输入/点击等操作。 比如下面这个测试网站有2个frame页&#xff1a;http://www.sahitest.com/demo/framesTest.h…

5.toString()、构造方法、垃圾回收、静态变量与静态方法、单例设计模式、内部类

文章目录 一、toString()1. 优缺点2. 使用方法举例① Dos类里更省事的方法 ② Application里 二、构造方法1. 导入2. 什么是构造方法3. 怎么写构造方法① 无参的构造方法(无参构造器)② 有参的构造方法(有参构造器)③ 注意 4. 构造方法的重载 三、再探this1. 给成员变量用2. 给…

数据结构——排序(交换排序)

目录 一、交换排序的总体概念 二、冒泡排序 三、快速排序 1.挖坑法 2.左右指针 3.前后指针 一、交换排序的总体概念 交换排序是一类排序算法&#xff0c;它的核心思想是通过交换元素的位置来达到排序的目的。在排序过程中&#xff0c;比较数组中的元素对&#xff0c;如果…

【用户管理 添加用户 超级用户 用户和组】

用户管理 添加用户超级用户用户和组 添加用户 介绍用户的管理操作 比如&#xff0c;添加一个用户 sudo useradd -m test1 其中&#xff0c;sudo表示管理员身份运行 修改用户密码 sudo passwd test1 删除用户 sudo userdel test 超级用户 1.首次使用时&#xff0c;需要给roo…

快速区分 GPT-3.5 与 GPT-4

问&#xff1a;鲁迅为什么暴打周树人&#xff1f; GPT3.5回答 各种稀奇古怪的理由 GPT4回答 正确区分鲁迅和周树人是同一个人 国内GPT入口 https://ai-to.cn/url/?ulihaimao

​nginx负载均衡的五种算法​

一、Nginx负载均衡算法 1、轮询&#xff08;默认&#xff09; 每个请求按时间顺序逐一分配到不同的后端服务&#xff0c;如果后端某台服务器死机&#xff0c;自动剔除故障系统&#xff0c;使用户访问不受影响。 例如&#xff1a; upstream bakend { server 192.168.0.1; …