前端下载文件有哪些方式
前端下载文件有哪些方式
在前端,最常见和最常用的文件下载方式是:
- 使用 标签的 download 属性:
创建一个 标签,并设置其 href 属性为文件的 URL,然后使用 download 属性指定下载的文件名。
这种方式简单直接,适用于下载单个文件,例如图片、文档、音频或视频等。
- window.open(imageUrl, ‘_blank’)
window.open 方法可以在新的浏览器窗口或标签页中打开指定的 URL。通过将文件的 URL 传递给 window.open 方法,并指定第二个参数为 _blank,可以在新的标签页中打开文件,并触发浏览器的文件下载行为。
window.open 方法可能会受到浏览器的弹出窗口阻止设置的影响,因此在某些情况下,浏览器可能会阻止弹出新的标签页。此外,该方式无法自定义下载文件名或其他下载选项。
- 使用 fetch API:
使用 fetch 方法发送 GET 请求获取文件数据,然后使用 Response.blob() 方法将响应数据转换为 Blob 对象。
创建一个链接或 Blob 对象,并使用 URL.createObjectURL 方法生成一个临时链接,最后模拟点击下载。
这种方式适用于需要在下载前进行更多处理的情况,例如添加请求头、验证、处理错误等,以及需要动态生成下载内容的场景。
不同的下载方式适用于不同的场景
- window.open 方法:
- 适用于直接在浏览器中打开文件或以新窗口或标签页的形式显示文件内容。
- 适用于非敏感、公开的文件下载,例如图片、PDF 文件等。
- 不适用于需要自定义下载文件名或其他下载选项的场景。
- 标签的 download 属性:
- 适用于直接在浏览器中下载文件,提供了简单的方式指定下载文件的名称。
- 适用于单个文件的下载,例如图片、文档、音频或视频文件等。
- 使用 Fetch API 和 Axios :
- 适用于需要在前端进行更多处理的下载操作,例如在下载前需要添加请求头、验证、处理错误等。
- 适用于需要动态生成下载内容的场景,例如将多个文件合并为一个压缩文件或生成动态报表等。
- 提供更多的灵活性和控制能力,但可能需要更多的代码和处理逻辑。
Fetch API 是原生的 JavaScript API,提供了一种简单、基础的方式来发送和处理网络请求。它是现代浏览器原生支持的一种方法。
而 Axios 是一个流行的第三方库,提供了更高级、更易用的 API,用于发送 HTTP 请求。Axios 具有更多的功能和配置选项,并且能够在不同的环境中使用(包括浏览器和 Node.js)。
总结:如果只是简单地下载一个单独的文件,并且不需要进行额外的处理或自定义,那么使用 标签的 download 属性或 window.open 方法是最简单和直接的方式。如果需要更多的控制和处理能力,或者需要动态生成下载内容,那么使用 fetch API 可能更适合。
使用Axios 下载文件举例
const handleDownload = (imageUrl: string) => {let token = localStorage.getItem('token');if (null === token) {token = '';}axios({url: imageUrl,method: 'GET',responseType: 'blob', // 设置响应类型为 blobheaders: {Authorization: `Bearer ${token}`, // 替换为您的 Bearer Token},}).then((response) => {const url = URL.createObjectURL(new Blob([response.data]));const link = document.createElement('a');link.href = url;link.download = 'filename.jpg'; // 设置下载的文件名link.click();URL.revokeObjectURL(url);}).catch((error) => {console.error('Error downloading file:', error);});};
相关文章:
前端下载文件有哪些方式
前端下载文件有哪些方式 在前端,最常见和最常用的文件下载方式是: 使用 标签的 download 属性: 创建一个 标签,并设置其 href 属性为文件的 URL,然后使用 download 属性指定下载的文件名。 这种方式简单直接&…...
vscode预览github上的markdown效果
需要安装的插件有: Github Markdown Preview Markdown Checkboxes Markdown Emoji Markdown footnotes Markdown Preview Github Styling Markdown Preview Mermaid Support Markdown yaml Preamble ctrlshiftv结合双页功能...
使用PaddleNLP识别垃圾邮件:用BERT做中文邮件内容分类,验证集准确率高达99.6%以上(附公开数据集)
使用PaddleNLP识别垃圾邮件:用BERT做中文邮件内容分类,验证集准确率高达99.6%以上(附公开数据集)。 要使用PaddleNLP和BERT来识别垃圾邮件并做中文邮件内容分类,可以按照以下步骤进行操作: 安装PaddlePaddle和PaddleNLP:首先,确保在你的环境中已经安装了PaddlePaddle和…...
在bash或脚本中,如何并行执行命令或任务(命令行、parallel、make)
最近要批量解压归档文件和压缩包,所以就想能不能并行执行这些工作。因为tar自身不支持并行解压,但是像make却可以支持生成一些文件,所以我才有了这种想法。 方法有两种,第一种不用安装任何软件或工具,直接bash或其他 …...
拼音笔记笔记
一、翀的读音:chōng 声母:ch 韵母:ong 声调:一声 二、汉字释义: 向上直飞,相当于“冲”。 三、汉字结构:左右结构 四、部首:羽 五、相关词组: 翀举:谓成仙升…...
13. Threejs案例-绘制3D文字
13. Threejs案例-绘制3D文字 实现效果 知识点 FontLoader 一个用于加载 JSON 格式的字体的类。 返回 font,返回值是表示字体的 Shape 类型的数组。 其内部使用 FileLoader 来加载文件。 构造器 FontLoader( manager : LoadingManager ) 参数类型描述managerLo…...
clickhouse清理日志。
参考Clickhouse:日志表占用大量磁盘空间怎么办?_clickhouse store目录很大-CSDN博客t 清理脚本如下,清理动作需要时间比较长,10多分钟: alter table system.trace_log delete where event_date < 2024-01-01 alt…...
JS中实现继承
1.使用call实现继承(不推荐) function Animal(name) {this.name name;this.run function() {console.log(this.name, "跑");} } function Dog(name) {// 继承Animal.call(this, name);this.sleep function() {console.log(this.name, &quo…...
spring boot学习第九篇:操作mongo的集合和集合中的数据
1、安装好了Mongodb 参考:ubuntu安装mongod、配置用户访问、添删改查-CSDN博客 2、pom.xml文件内容如下: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns…...
momentJs推导日历组件
实现效果: 代码: 引入momentjs然后封装两个函数构建出基本数据结构 import moment from moment;// 某月有多少天 export const getEndDay (m) > m.daysInMonth();/*** description 获取本月空值数据* param { Date } year { } 年度* param { Number } month …...
Linux C/C++ 原始套接字:打造链路层ping实现
在C/C中,我们可以使用socket函数来创建套接字。我们需要指定地址族为AF_PACKET,协议为htons(ETH_P_ALL)来捕获所有传入和传出的数据包。 可以使用sendto和recvfrom函数来发送和接收数据包。我们需要构建一个合法的链路层数据包,在数据包的头…...
TCP 粘包/拆包
文章目录 概述粘包拆包发生场景解决TCP粘包和拆包问题的常见方法Netty对粘包和拆包问题的处理小结 概述 TCP的粘包和拆包问题往往出现在基于TCP协议的通讯中,比如RPC框架、Netty等 TCP 粘包/拆包 就是你基于 TCP 发送数据的时候,出现了多个字符串“粘”…...
【Spring Boot 3】应用启动执行特定逻辑
【Spring Boot 3】应用启动执行特定逻辑 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术总是要花…...
设计模式(行为型模式)观察者模式
目录 一、简介二、观察者模式2.1、事件接口及其实现2.2、观察者接口及其实现2.3、主题接口及其实现2.4、使用 三、优点与缺点 一、简介 观察者模式(Observer Pattern)是一种行为设计模式,它定义了一种一对多的依赖关系,当一个对象…...
Windows 版Oracle 数据库(安装)详细过程
首先到官网上去下载oracle64位的安装程序 第一步:将两个datebase文件夹解压到同一目录中。 当下载完成后,它里面是两个文件夹 win64_11gR2_database_1of2, win64_11gR2_database_2of2,我们需要把其中的一个database文件夹整合在一起(复制一个database文件夹到另一…...
编程实例分享,计费系统一定要安装灯光控制吗?佳易王计时计费管理系统软件V18.0教程说明
编程实例分享,计费系统一定要安装灯光控制吗?佳易王计时计费管理系统软件V18.0教程说明 一、前言 以下教程以 佳易王计时计费软件V18.0为例说明 1、该软件既可以接灯控,也可以不接灯控,如果接灯控,则点击开始计时的时…...
【webpack】优化提升
webpack优化提升 安装webpack相关内容向下兼容游览器-babel/polyfill进一步优化babel/polyfill模块联邦-共享模块如何提升构建性能通用环境下1,webpack更新到最新版本2,将loader应用于最少数量的必要模块3,引导(每个额外的loader/…...
视频无损放大修复工具Topaz Video AI 新手入门教程
想要自学Topaz Video AI ?Topaz Video AI 如何使用?这里给大家带来了视频无损放大修复工具Topaz Video AI 新手入门教程,快来看看吧! 下载:Topaz Video AI for mac 导入您的文件 有两种方法可以将文件导入 Topaz Vid…...
《向量数据库指南》——Milvus Cloud 「部署」:简化部署一直在路上
“docker-compose 能部署分布式吗?”"单机部署为什么还依赖这么多组件?"“大家 Milvus Cloud 集群部署有没有实践过比较好的方案?” 作为一个开源数据库,是否能够进行快速部署,是所有工作的前提。在简化部署的道路上,社区从来没有停止过脚步。2023 年,社区推…...
使用x86架构+Nvidia消费显卡12G显存,搭建智能终端,将大模型本地化部署,说不定是未来方向,开源交互机器人设计
1,大模型本地部署 视频说明地址: https://www.bilibili.com/video/BV1BF4m1u769/ 【创新思考】(1):使用x86架构Nvidia消费显卡12G显存,搭建智能终端,将大模型本地化部署,语音交互机…...
JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中,拉取视频流只要求udp方式,从2016开始要求新增支持tcp被动和tcp主动两种方式,udp理论上会丢包的,所以实际使用过程可能会出现画面花屏的情况,而tcp肯定不丢包,起码…...
React Native 导航系统实战(React Navigation)
导航系统实战(React Navigation) React Navigation 是 React Native 应用中最常用的导航库之一,它提供了多种导航模式,如堆栈导航(Stack Navigator)、标签导航(Tab Navigator)和抽屉…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中,Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染(即CPU被阻塞),这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案: 对惹,这里有一个游戏开发交流小组&…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
.Net框架,除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
Redis:现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发,其初衷是为了满足他自己的一个项目需求,即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源,Redis凭借其简单易用、…...
【Linux】自动化构建-Make/Makefile
前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具:make/makfile 1.背景 在一个工程中源文件不计其数,其按类型、功能、模块分别放在若干个目录中,mak…...
LOOI机器人的技术实现解析:从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品,通过将智能手机转变为具有情感交互能力的桌面机器人,展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家,我将全面解析LOOI的技术实现架构,特别是其手势识别、物体识别和环境…...
