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

function DownloadFile(tmp) { 
  // 下载文件的函数,tmp是文件的路径,包括文件名
  var url = "http://" + location.host + tmp; // 拼接完整的URL
  console.log("打印url的样式", url); // 打印拼接后的URL
  var 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标签的下载链接为URL
      a.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标签从页面中移除。

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值