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

news/2024/4/20 20:11:38/文章来源:https://blog.csdn.net/sleep_i_like/article/details/130079306
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.luyixian.cn/news_show_286495.aspx

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

相关文章

ActiveMQ使用(一):在JavaScript中使用stomp.js

ActiveMQ使用(一):在JavaScript中使用stomp.js 1. 环境准备 jQuery-1.10 下载地址:https://www.jsdelivr.com/package/npm/jquery-1.10.2?tabfilesstomp.js 2.3.3: 下载地址:https://www.jsdelivr.com/package/npm/stompjs 2. 相关代码 <!DOCTYPE html> <html l…

ABAP 创建、修改、删除内部交货单(VL31N/VL32N)

一、干货 VL31N创建的BAPI&#xff1a; 1.GN_DELIVERY_CREATE 通用交货单使用的bapi&#xff0c;推荐使用 2.BAPI_DELIVERYPROCESSING_EXEC 简单&#xff0c;但是字段比较少 3.BBP_INB_DELIVERY_CREATE 听说有bug&#xff0c;我就没有使用这个了 VL32N修改/删除BAPI: BAPI_INB…

从此告别PPT制作的烦恼:ChatGPT和MindShow帮你快速完成

目录前言一、chatGPT&MindShow简介二、chatGPT&MindShow搭配生成PPT2-1、注意事项2-2、生成PPT的步骤2-3、使用chatGPT进行探索2-4、内容生成2-5、PPT制作三、碎碎念总结前言 随着科技的不断发展&#xff0c;人们对于AI技术的依赖和需求也在逐渐增加。然而&#xff0c…

使用layui组件库制作进度条

使用layui组件库制作进度条 html代码 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>Example</title><!-- 引入 layui 的 CSS 文件 --><link rel"stylesheet" href"https://cdn.staticfil…

(数字图像处理MATLAB+Python)第四章图像正交变换-第四、五节:Radon变换和小波变换

文章目录一&#xff1a;Radon变换&#xff08;1&#xff09;Radon变换原理&#xff08;2&#xff09;Radon变换实现&#xff08;3&#xff09;Radon变换性质&#xff08;4&#xff09;Radon变换应用二&#xff1a;小波变换&#xff08;1&#xff09;小波A&#xff1a;定义B&…

盐城北大青鸟告诉你互联网大厂的哪些岗位不限专业?

进大厂是毕业生、职场人梦寐以求的工作&#xff01; 除了高薪以外&#xff0c;大厂具有舒适的工作环境&#xff0c;一流高校的同事&#xff0c;高额的住房补贴&#xff0c;健身房&#xff0c;下午茶&#xff0c;重点是还有营养丰富的员工餐&#xff01; 那互联网公司都有什么…

Adaptive AUTOSAR——State Management(VRTE 3.0 R21-11)

状态管理是自适应平台服务中的一个功能集群。 在自适应平台中&#xff0c;状态决定了一组活动的自适应应用程序。 特定于项目的应用程序&#xff0c;即状态管理器&#xff0c;决定何时请求状态更改&#xff0c;从而更改当前活动的应用程序集。状态管理器是特定于项目的&#…

基于NXP iMX8M Mini处理器测试DPDK

By Toradex秦海 1). 简介 DPDK (Data Plane Development Kit) 软件是一组用户空间库和驱动程序&#xff0c;可加速在所有主要 CPU 架构上运行的网络数据包处理工作负载&#xff0c;以便提升整个网络数据服务的QoS。其最早由 Intel 大约 2010年创建&#xff0c;后由6WIND公司发…

【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 )

文章目录一、元素的显示与隐藏二、display 隐藏对象1、display 隐藏对象语法说明2、display 显示元素代码示例3、display 隐藏元素代码示例三、visibility 隐藏对象1、visibility 隐藏对象语法说明2、visibility 显示对象代码示例3、visibility 隐藏对象代码示例四、overflow 隐…

96年阿里P7晒出工资单:狠补了这个,真香...

最近一哥们跟我聊天装逼&#xff0c;说他最近从阿里跳槽了&#xff0c;我问他跳出来拿了多少&#xff1f;哥们表示很得意&#xff0c;说跳槽到新公司一个月后发了工资&#xff0c;月入5万多&#xff0c;表示很满足&#xff01;这样的高薪资着实让人羡慕&#xff0c;我猜这是税后…

MongoDB 聚合管道的集合关联($lookup)及合并($unionWith)

目前为止&#xff0c;我们已经介绍了一部分聚合管道中的管道参数&#xff1a; $match&#xff1a;文档过滤 $group&#xff1a;文档分组&#xff0c;并介绍了分组中的常用操作&#xff1a;$addToSet&#xff0c;$avg&#xff0c;$sum&#xff0c;$min&#xff0c;$max等。 $add…

可用的rtsp ,rtmp地址以及使用VLC和ffmpeg 播放视频流

可用的 rtmp地址: rtmp://ns8.indexforce.com/home/mystream 可用的 rtsp地址: rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4 可搭配VLC播放器使用&#xff0c;以及虚幻4 流媒体使用&#xff0c;实现直播效果 1.使用VLC 播放&#xff1a;https://www.vi…

某某客户的一次勒索病毒应急响应

Lockbit勒索病毒应急响应背景1、应急处理排查2、勒索病毒来源分析3、勒索病毒分析4、勒索病毒解密5、主机分析分析6、后续安全加固和改进措施结论背景 美好的周六刚开始&#xff0c;眼睛一睁&#xff0c;领导就发消息&#xff0c;说某客户中了勒索病毒&#xff0c;特别着急&am…

2023年第三届智能机器人与系统国际会议(ISoIRS 2023) | IEEE-CPS独立出版

2023年第三届智能机器人与系统国际会议(ISoIRS 2023) | IEEE-CPS独立出版 会议简介 Brief Introduction 2023年第三届智能机器人与系统国际会议(ISoIRS 2023) 会议时间&#xff1a;2023年5月26日-28日 召开地点&#xff1a;中国长沙 大会官网&#xff1a;www.isoirs.org ISoIRS…

项目打包记录提交id

某天上午正在摸鱼的小邓&#xff0c;突然被领导拉倒一个2年前项目的现场问题沟通群&#xff0c;说是现场数据无法入库&#xff0c;需要排查&#xff0c;奈何不知道版本&#xff0c;无奈的小邓值得用时间记录一个点一个点的从gitlab中查找&#xff0c;为了防止后续提供到现场的版…

基于DSP+FPGA的机载雷达伺服控制系统的硬件设计与开发(一)总体设计

2.1 功能要求及性能指标 2.1.1 功能要求 &#xff08;1&#xff09;具备方位和俯仰两轴运动的能力&#xff1b; &#xff08;2&#xff09;方位轴可实现预置、周扫和扇扫功能&#xff1b; &#xff08;3&#xff09;俯仰轴可实现预置功能。 2.1.2 性能指标 &#xff08;1&#…

江南爱窗帘十大品牌,怎么合理的搭配窗帘配色

窗帘行业圈&#xff1a;窗帘行业内部交流圈&#xff0c;窗帘从业者的交流内部圈。 当阳光照进房间的那一刻&#xff0c; 光线给空间带来了无限的可能。 窗边的帘帐既是美丽的风景 又是可爱的魔术师。 在光影变幻的时空里 让你的生活布满温馨和奇幻。 1.窗帘材质怎么选 窗帘的材…

Voting_Averaging算法预测银行客户流失率

Voting_Averaging算法预测银行客户流失率 描述 为了防止银行的客户流失&#xff0c;通过数据分析&#xff0c;识别并可视化哪些因素导致了客户流失&#xff0c;并通过建立一个预测模型&#xff0c;识别客户是否会流失&#xff0c;流失的概率有多大。以便银行的客户服务部门更…

Qt Quick - 分隔器综述

Qt Quick - 分隔器综述一、概述二、MenuSeparator 控件1. 用法&#xff1a;三、ToolSeparator 控件1. 用法一、概述 Qt Quick Controls 提供了多种分隔符&#xff0c;其实就是分割一下MenuBar和ToolBar里面的内容。 控件功能MenuSeparator将菜单中的一组项目与相邻项目分开To…

高效部署Redis Sentinel模式(哨兵模式),手把手教学

Redis Sentinel模式部署前言一、服务器部署同版本的redis1、换软件源在yum拉取包的时候启用remi源二、修改配置文件1.修改/etc/redis.conf2.配置/etc/redis/sentinel.conf三、启动redis服务1、启动服务2、连接redis3、检查redis前言 这里就不过多的解释高可用的好处了&#xf…