【JavaScript编程】前端实现文件下载

在前端实现文件下载,主要有以下几种常见的方法:

一、使用<a>标签


这种方法是最常见的,只需要在HTML中创建一个<a>标签,并通过JavaScript控制其点击行为,就可以实现文件下载。例如:

function downloadFile(url, fileName) {let link = document.createElement('a');link.style.display = 'none';link.href = url;link.download = fileName;document.body.appendChild(link);link.click();document.body.removeChild(link);
}

二、使用window.location.href


通过设置window.location.href属性来改变当前页面的URL,从而实现文件下载。例如:

function downloadFile(url) {window.location.href = url;
}

三、使用window.open


function downloadFile(url) {// 如果想在同一窗口打开文件,则将target设置为'_self'var target = '_self'; // 默认值是'_blank'window.open(url, target);
}

四、使用Blob对象


  1. 设置请求的响应类型为blob,这样就可以接收到文件流。然后,通过获取文件流创建Blob URL,来实现下载。例如:

    function downloadFile(url, fileName) {fetch('URL', {method: 'GET',headers: {},responseType: 'blob' // 重要:设置响应类型为blob以便接收文件流}).then(response => response.blob()).then(blob => {let blobUrl = window.URL.createObjectURL(blob);let a = document.createElement('a');a.href = blobUrl;a.download = fileName;document.body.appendChild(a);a.click();document.body.removeChild(a);// 释放blob URLwindow.URL.revokeObjectURL(blobUrl);});
    }
    
  2. 设置请求的响应类型为arraybuffer,将ArrayBuffer转换成Blob,然后创建Blob URL,来实现下载。例如:

    function downloadFile(url, fileName) {fetch('URL', {method: 'GET',headers: {},responseType: 'arraybuffer' // 设置响应类型为ArrayBuffer}).then(response => response.arrayBuffer().then(arrayBuffer => {// 在这里处理ArrayBuffer数据// 例如,可以将ArrayBuffer转换成Blob,然后创建一个链接让用户下载const blob = new Blob([new Uint8Array(arrayBuffer)], { type: 'application/octet-stream' });const downloadUrl = window.URL.createObjectURL(blob);const a = document.createElement('a');a.href = downloadUrl;a.download = fileName;document.body.appendChild(a);a.click();document.body.removeChild(a);// 释放blob URLwindow.URL.revokeObjectURL(downloadUrl);});
    }
    
  3. arraybufferblob的区别

    当你想要处理二进制数据,如图片、音频或视频文件时,你应该选择responseType: 'arraybuffer'。这是因为ArrayBuffer是一种表示二进制数据的容器,它可以用来存储和传输非文本数据。当你设置responseType为’arraybuffer’时,浏览器会以ArrayBuffer的形式接收响应数据,这使得你可以直接访问和操作这些原始二进制数据。

    相比之下,如果你选择responseType: 'blob',浏览器会以Blob的形式接收响应数据。虽然Blob也可以用来存储二进制数据,但它实际上是对底层数据的引用,这意味着你不能直接访问或操作这些数据,除非你将其转换为ArrayBuffer或其他形式。此外,Blob对象通常用于创建可下载的文件,而不是直接处理二进制数据。

注意


无论哪种方法,都需要确保服务器端的响应头正确设置了Content-Dispositionattachment,这样才能保证浏览器能够识别这是一个需要下载的文件。

Content-Disposition: attachment; filename="filename.jpg"

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

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

相关文章

【Vue】动态样式

内联样式的动态样式 body(){ boxASelect:false, } v-bind:style"{borderColor:boxASelect ? red : #ccc}" <body><header><h1>Vue Dynamic Styling</h1></header><section id"styling"><div class"demo&quo…

2024年MathorCup数学建模思路A题B题C题D题思路分享

文章目录 1 赛题思路2 比赛日期和时间3 组织机构4 建模常见问题类型4.1 分类问题4.2 优化问题4.3 预测问题4.4 评价问题 5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 比赛日期和时间 报名截止时间&#xff1a;2024…

深入理解MySQL索引:原理、类型

在数据库领域&#xff0c;索引是提高查询效率的重要工具之一。MySQL作为最流行的关系型数据库之一&#xff0c;其索引的使用和优化至关重要。本文将深入探讨MySQL索引的原理、类型以及最佳实践&#xff0c;帮助读者更好地理解和应用索引。 一、索引的基本概念 1. 什么是索引&…

电脑文件轻松管理:按大小归类,高效存储文件

在数字化时代&#xff0c;电脑文件的管理变得至关重要。面对海量的数据和信息&#xff0c;如何高效整理、归类和保存这些文件&#xff0c;成为了我们必须要面对的挑战。今天&#xff0c;我们就来介绍一种简单而实用的文件管理方法——按文件大小归类保存&#xff0c;让您的数据…

再次加深理解Java中的并发编程

目录 一、线程、进程、程序 二、线程状态 三、线程的七大参数 四、lock与synchronized锁机制 一&#xff09;、lock与synchronized锁区别 二&#xff09;、synchronized锁原理 三&#xff09;、Lock锁原理 五、synchronized锁升级原理 一&#xff09;、锁升级基础知识 …

深度思考:雪花算法snowflake分布式id生成原理详解

雪花算法snowflake是一种优秀的分布式ID生成方案&#xff0c;其优点突出&#xff1a;它能生成全局唯一且递增的ID&#xff0c;确保了数据的一致性和准确性&#xff1b;同时&#xff0c;该算法灵活性强&#xff0c;可自定义各部分bit位&#xff0c;满足不同业务场景的需求&#…

EXCEL VBA 多sheet批量转转PDF

EXCEL VBA 多sheet批量转转PDF Sub zhuanpdf() 转pdfApplication.ScreenUpdating False 关闭刷新Dim chaifm As String 拆分名chaifm Sheets("参数表").Cells(75, 2).ValueDim yuanbm As String 原表名Dim ws As Worksheet 定义表格Dim biao As String 表名Dim …

java Web洗衣店管理系统用eclipse定制开发mysql数据库BS模式java编程jdbc

一、源码特点 JSP 洗衣店管理系统是一套完善的web设计系统&#xff0c;对理解JSP java 编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,eclipse开发&#xff0c;数据库为Mysql5.0&#xff0c;使用…

API接口自动化测试框架搭建之需求整理、详细设计和框架设计!

​ 简介&#xff1a; API接口自动化测试框架搭建之需求整理、详细设计和框架设计 1 需求整理 1.1 实现目的 API接口自动化测试&#xff0c;主要针对http接口协议&#xff1b;便于回归测试&#xff1b;线上或线下巡检测试&#xff0c;结合持续集成&#xff0c;及时发现运行环…

数据迁移通用笔记(Minio、Mysql、Mongo、ElasticSearch)

序号更新时间备注12024.03.26初始化笔记22024.03.27细化ES 集群和单节点的描述 文章目录 一、Mino 数据迁移1、mc的基础操作2、镜像复制3、备份复制 二、MySql数据迁移1、利用主从复制2、数据汇出汇入 三、Mongo数据迁移1、利用主从复制2、数据汇出汇入 四、ElasticSearch数据迁…

图像最低三位的可能情况

要求 函数f,函数g,分别针对三个比特位bit1,bit2,bit3进行运算,得到结果为A和B。具体为: A=f(bit1,bit2,bit3) B=g(bit1,bit2,bit3) 能否让函数f和函数g满足让A和B的结果出现四种可能“00”、“01”、“10”、“11”。 实现 可以设计这样的函数f和g,使得它们对于三个比特…

设计模式(8):组合模式

一.组合模式场景 把部分和整体的关系用树形结构来表示&#xff0c;从而使客户端可以使用统一的方式处理部分对象和整体对象。 二.组合模式核心 抽象组件(Component)角色&#xff1a;定义了叶子和容器组件的共同点&#xff1b;叶子组件(Leaf)角色&#xff1a;无子节点&#x…

嵌入式中逻辑分析仪的基本操作与实现

作为一名嵌入式软件/硬件工程师,要会使用各种仪表仪器,尤其示波器、逻辑分析仪, 这两个仪器可以监测各种数据线、信号线波形, 可以帮我们快速定位产品问题,缩短开发周期。 今天一口君安利一款非常不错的逻辑分析仪:kingst LA5016 这款仪器非常容易上手, 尤其在一些…

【滑动窗口】Leetcode 水果成篮

题目解析 904. 水果成篮 算法讲解 这道题的本质就是&#xff1a;寻找一段连续的区域&#xff08;子数组&#xff09;&#xff0c;这一段连续的区域里面最多包含两种水果&#xff0c;因为有可能这一段连续的区域里面全是一种水果&#xff0c;比如&#xff1a;f(x) {1,1,1,1,…

Linux中安装JDK17.X

1、总体概述&#xff1f; 该操作方式适合centos或red hat环境 2.1、在线下载JDK安装包&#xff1f; 通过wget命令下载JDK17.X包 wget https://download.oracle.com/java/17/latest/jdk-17_linux-x64_bin.tar.gz 如果提示&#xff1a;没有wget命令就安装wget yum install w…

G35-2单螺杆泵

在现代工业流程中&#xff0c;流体输送是至关重要的一环。无论是石油化工、能源开采还是精细化工领域&#xff0c;高效率和可靠的泵送设备都是确保生产过程平稳运行的关键。在这样的背景下&#xff0c;G35-2单螺杆泵凭借其卓越的性能和广泛的应用性&#xff0c;成为了众多工业企…

答题小程序功能细节揭秘:如何提升用户体验和满足用户需求?

答题小程序功能细节体现 随着移动互联网的快速发展&#xff0c;答题小程序成为了用户获取知识、娱乐休闲的重要平台。一款优秀的答题小程序不仅应该具备简洁易用的界面设计&#xff0c;更应该在功能细节上做到极致&#xff0c;以提升用户体验和满足用户需求。本文将从题库随机…

SCI论文发表多长时间才可以被检索?

sci检索&#xff0c;是指发表的sci论文可以在web of science上查询到&#xff0c;是sci论文发表的最后一个步骤&#xff0c;建立在见刊的基础之上。那么&#xff0c;sci发表后多久可检索?没有统一标准&#xff0c;刊物不同&#xff0c;检索时间有差异。 一、SCI文章检索的注意…

深入解析AI大模型:原理、挑战与前景

前言 在现今技术飞速发展的时代&#xff0c;AI大模型学习已成为科技领域的研究热点。要想在这一领域取得突破&#xff0c;研究者需掌握扎实的数学基础、编程能力以及特定领域的业务知识。本文将深入剖析AI大模型的原理、挑战与前景&#xff0c;为读者提供有益的建议。 一、AI…

Ubuntu22.04安装 wordpress

第一步安装 mysql 这个必须是第一步 sudo apt install mysql-server第二步修改mysql密码 ubuntu 首次登录mysql8 未设置密码或忘记密码解决方法 亲测可用 第三步安装 nginx sudo apt update && sudo apt upgrade -y sudo apt install nginx sudo systemctl enable …