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

前端下载文件有哪些方式

前端下载文件有哪些方式

在前端,最常见和最常用的文件下载方式是:

  1. 使用 标签的 download 属性:

创建一个 标签,并设置其 href 属性为文件的 URL,然后使用 download 属性指定下载的文件名。
这种方式简单直接,适用于下载单个文件,例如图片、文档、音频或视频等。

  1. window.open(imageUrl, ‘_blank’)
    window.open 方法可以在新的浏览器窗口或标签页中打开指定的 URL。通过将文件的 URL 传递给 window.open 方法,并指定第二个参数为 _blank,可以在新的标签页中打开文件,并触发浏览器的文件下载行为

window.open 方法可能会受到浏览器的弹出窗口阻止设置的影响,因此在某些情况下,浏览器可能会阻止弹出新的标签页。此外,该方式无法自定义下载文件名或其他下载选项。

  1. 使用 fetch API:
    使用 fetch 方法发送 GET 请求获取文件数据,然后使用 Response.blob() 方法将响应数据转换为 Blob 对象。
    创建一个链接或 Blob 对象,并使用 URL.createObjectURL 方法生成一个临时链接,最后模拟点击下载。
    这种方式适用于需要在下载前进行更多处理的情况,例如添加请求头、验证、处理错误等,以及需要动态生成下载内容的场景。

不同的下载方式适用于不同的场景

  1. window.open 方法:
  • 适用于直接在浏览器中打开文件或以新窗口或标签页的形式显示文件内容。
  • 适用于非敏感、公开的文件下载,例如图片、PDF 文件等。
  • 不适用于需要自定义下载文件名或其他下载选项的场景。
  1. 标签的 download 属性:
  • 适用于直接在浏览器中下载文件,提供了简单的方式指定下载文件的名称。
  • 适用于单个文件的下载,例如图片、文档、音频或视频文件等。
  1. 使用 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&#xff1a;日志表占用大量磁盘空间怎么办&#xff1f;_clickhouse store目录很大-CSDN博客t 清理脚本如下&#xff0c;清理动作需要时间比较长&#xff0c;10多分钟&#xff1a; alter table system.trace_log delete where event_date < 2024-01-01 alt…...

JS中实现继承

1.使用call实现继承&#xff08;不推荐&#xff09; 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 参考&#xff1a;ubuntu安装mongod、配置用户访问、添删改查-CSDN博客 2、pom.xml文件内容如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns…...

momentJs推导日历组件

实现效果: 代码&#xff1a; 引入momentjs然后封装两个函数构建出基本数据结构 import moment from moment;// 某月有多少天 export const getEndDay (m) > m.daysInMonth();/*** description 获取本月空值数据* param { Date } year { } 年度* param { Number } month …...

Linux C/C++ 原始套接字:打造链路层ping实现

在C/C中&#xff0c;我们可以使用socket函数来创建套接字。我们需要指定地址族为AF_PACKET&#xff0c;协议为htons(ETH_P_ALL)来捕获所有传入和传出的数据包。 可以使用sendto和recvfrom函数来发送和接收数据包。我们需要构建一个合法的链路层数据包&#xff0c;在数据包的头…...

TCP 粘包/拆包

文章目录 概述粘包拆包发生场景解决TCP粘包和拆包问题的常见方法Netty对粘包和拆包问题的处理小结 概述 TCP的粘包和拆包问题往往出现在基于TCP协议的通讯中&#xff0c;比如RPC框架、Netty等 TCP 粘包/拆包 就是你基于 TCP 发送数据的时候&#xff0c;出现了多个字符串“粘”…...

【Spring Boot 3】应用启动执行特定逻辑

【Spring Boot 3】应用启动执行特定逻辑 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术总是要花…...

设计模式(行为型模式)观察者模式

目录 一、简介二、观察者模式2.1、事件接口及其实现2.2、观察者接口及其实现2.3、主题接口及其实现2.4、使用 三、优点与缺点 一、简介 观察者模式&#xff08;Observer Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;当一个对象…...

Windows 版Oracle 数据库(安装)详细过程

首先到官网上去下载oracle64位的安装程序 第一步&#xff1a;将两个datebase文件夹解压到同一目录中。 当下载完成后,它里面是两个文件夹 win64_11gR2_database_1of2, win64_11gR2_database_2of2,我们需要把其中的一个database文件夹整合在一起(复制一个database文件夹到另一…...

编程实例分享,计费系统一定要安装灯光控制吗?佳易王计时计费管理系统软件V18.0教程说明

编程实例分享&#xff0c;计费系统一定要安装灯光控制吗&#xff1f;佳易王计时计费管理系统软件V18.0教程说明 一、前言 以下教程以 佳易王计时计费软件V18.0为例说明 1、该软件既可以接灯控&#xff0c;也可以不接灯控&#xff0c;如果接灯控&#xff0c;则点击开始计时的时…...

【webpack】优化提升

webpack优化提升 安装webpack相关内容向下兼容游览器-babel/polyfill进一步优化babel/polyfill模块联邦-共享模块如何提升构建性能通用环境下1&#xff0c;webpack更新到最新版本2&#xff0c;将loader应用于最少数量的必要模块3&#xff0c;引导&#xff08;每个额外的loader/…...

视频无损放大修复工具Topaz Video AI 新手入门教程

想要自学Topaz Video AI &#xff1f;Topaz Video AI 如何使用&#xff1f;这里给大家带来了视频无损放大修复工具Topaz Video AI 新手入门教程&#xff0c;快来看看吧&#xff01; 下载&#xff1a;Topaz Video AI for mac 导入您的文件 有两种方法可以将文件导入 Topaz Vid…...

《向量数据库指南》——Milvus Cloud 「部署」:简化部署一直在路上

“docker-compose 能部署分布式吗?”"单机部署为什么还依赖这么多组件?"“大家 Milvus Cloud 集群部署有没有实践过比较好的方案?” 作为一个开源数据库,是否能够进行快速部署,是所有工作的前提。在简化部署的道路上,社区从来没有停止过脚步。2023 年,社区推…...

使用x86架构+Nvidia消费显卡12G显存,搭建智能终端,将大模型本地化部署,说不定是未来方向,开源交互机器人设计

1&#xff0c;大模型本地部署 视频说明地址&#xff1a; https://www.bilibili.com/video/BV1BF4m1u769/ 【创新思考】&#xff08;1&#xff09;&#xff1a;使用x86架构Nvidia消费显卡12G显存&#xff0c;搭建智能终端&#xff0c;将大模型本地化部署&#xff0c;语音交互机…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...