前端利用AJAX下载文件的方法

news/2025/2/21 8:51:23/
function DownloadFile(tmp) { // 下载文件的函数,tmp是文件的路径,包括文件名var url = "http://" + location.host + tmp; // 拼接完整的URLconsole.log("打印url的样式", url); // 打印拼接后的URLvar filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0]; // 获取文件名// 通过URL获取文件名,最后一次出现/的位置+1是文件名的起始位置,同时去掉可能存在的?后面的查询参数var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象xhr.open("GET", url, true); // 发送GET请求,url为请求地址,true表示异步请求xhr.responseType = "blob"; // 设置响应类型为blob二进制数据xhr.onload = function () { // 当响应完成时,执行回调函数if (xhr.readyState === xhr.DONE && xhr.status === 200) { // 如果请求成功var blob = xhr.response; // 获取响应的数据var a = document.createElement("a"); // 创建a标签a.style.display = "none"; // 设置a标签为不可见document.body.appendChild(a); // 将a标签添加到页面中var url = window.URL.createObjectURL(blob); // 创建URL对象a.href = url; // 设置a标签的下载链接为URLa.download = filename; // 设置a标签的下载文件名a.click(); // 触发a标签的点击事件window.URL.revokeObjectURL(url); // 释放URL对象document.body.removeChild(a); // 将a标签从页面中移除}};xhr.send(); // 发送请求
}

代码中可能遇到的问题解释:
1.xhr.DONE

xhr.DONE是XMLHttpRequest对象的一个静态属性,其值为4。在XMLHttpRequest对象中,有一个readyState属性,表示请求的状态。当请求完成时,readyState的值为4。因此,xhr.DONE可以用来表示请求是否完成,即readyState是否为4。

在该函数中,使用xhr.DONE来判断请求是否完成,当xhr.readyState === xhr.DONE时表示请求已经完成。这种判断方式相比于使用具体的数字4更加清晰易懂,同时避免了硬编码的问题,提高了代码的可读性和可维护性。

2.window.URL.createObjectURL()

window.URL.createObjectURL()方法用于创建一个 DOMString,表示参数中传入的blob对象的URL,通常用于在客户端浏览器中将二进制数据转换为 URL,以便进行操作。

在该函数中,使用xhr.response属性获取响应数据,类型为Blob对象,然后通过window.URL.createObjectURL(blob)方法将Blob对象转换成URL对象,并将这个URL赋值给下载链接的href属性,从而实现了浏览器对二进制数据的下载。这个方法的返回值是一个URL 字符串,其生命周期与文档绑定,一旦文档被卸载,则 URL对象也将被释放。因此,在下载完成后,需要使用window.URL.revokeObjectURL(url)方法释放这个URL对象,以免浏览器内存泄漏。

需要注意的是,该方法并不会在服务器上创建任何文件或资源,只是创建一个 URL 对象,并将该对象作为链接在客户端上使用。

3.var url = window.URL.createObjectURL(blob),如果将url console打印出来,你会看到“b4fed4fd-507e-4ab8-afbe-aafb10b231da”这样的结构;

需要注意的是通过window.URL.createObjectURL(blob)方法创建的URL对象并不是一个网络上的可访问资源地址,而是一个虚拟的链接地址,代表了内存中的二进制数据对象。其实是一个唯一的UUID 字符串,用于标识该 URL对象。UUID是一种由软件生成的标识符,它通常由32个十六进制数字组成,用于唯一标识某个对象或实体
blob对象的URL地址是由浏览器动态生成的,不是一个静态的URL地址,因此不能直接在浏览器地址栏中输入该URL地址来访问。只能通过在网页中生成一个链接或者通过JavaScript实现文件下载等操作来使用这个URL地址。

函数的实现过程包括:

拼接完整的URL,其中location.host表示当前页面的主机名和端口号,tmp表示文件的路径和文件名;
通过URL获取文件名,通过字符串操作取得最后一个/字符后面的文本,同时去掉可能存在的?后面的查询参数;
创建XMLHttpRequest对象,发送GET请求,响应类型为blob二进制数据;
在响应完成后,判断请求是否成功,如果成功则获取响应的数据,创建一个a标签,将其添加到页面中;
创建一个URL对象,将其设置为a标签的下载链接,设置a标签的下载文件名,然后触发a标签的点击事件,使得浏览器下载文件;
释放URL对象,将a标签从页面中移除。


http://www.ppmy.cn/news/43649.html

相关文章

jmap执行失败了,怎么获取heapdump?

在之前的OOM问题复盘中,我们添加了jmap脚本来自动dump内存现场,方便排查OOM问题。 但当我反复模拟OOM场景测试时,发现jmap有时可以dump成功,有时会报错,如下: 经过网上一顿搜索,发现两种原因可…

NumPy 基础知识 :6~10

原文:Numpy Essentials 协议:CC BY-NC-SA 4.0 译者:飞龙 六、NumPy 中的傅立叶分析 除其他事项外,傅立叶分析通常用于数字信号处理。 这要归功于它在将输入信号(时域)分离为以离散频率(频域&am…

Python圈的普罗米修斯——一套近乎完善的监控系统

文章目录前言一、怎么采集监控数据?二、采集的数据结构与指标类型2.1 数据结构2.2 指标类型2.3 实例概念2.4.数据可视化2.5.应用前景总结前言 普罗米修斯(Prometheus)是一个SoundCloud公司开源的监控系统。当年,由于SoundCloud公司生产了太多的服务&…

【能力提升】SQL Server常见问题介绍及快速解决建议

前言 本文旨在帮助SQL Server数据库的使用人员了解常见的问题,及快速解决这些问题。这些问题是数据库的常规管理问题,对于很多对数据库没有深入了解的朋友提供一个大概的常见问题框架。 下面一些问题是在近千家数据库用户诊断时发现的常规问题&#xff0…

如何训练个人的ChatGpt4

如何在自己的计算机上安装类似 ChatGPT 的个人 AI 并在没有互联网的情况下运行它 个人 AI 的“第一台 PC”时刻 这是个人AI的“第一台PC”时刻,随之而来的是限制,就像在车库里生产第一台Apple 1一样。你是先驱。今天,任何人都可以使用私人和…

拼多多平台根据ID取商品详情 API接入参数 返回值说明

item_get-根据ID取商品详情 pinduoduo.item_get 公共参数 名称类型必须描述keyString是调用key(必须以GET方式拼接在URL中)secretString是调用密钥api_nameString是API接口名称(包括在请求地址中)[item_search,item_get,item_s…

C++经典面试题之深入解析list、vector和deque的联系和区别

一、前言 List 封装了链表,Vector 封装了数组,list 和 vector 得最主要的区别在于 vector 使用连续内存存储的,它支持 [] 运算符,而 list 是以链表形式实现的,不支持 [] 。Vector对于随机访问的速度很快,但…

为什么众多大型国企都在升级企业数智化底座?

在数字经济大潮中,数字化转型已不是企业的“选修课”,而是关乎企业生存和长远发展的“必修课”。在企业数字化转型中,国有企业特别是中央企业普遍将数字化转型战略作为“十四五”时期业务规划的重要内容之一,数字化能力也成为衡量…