原生JS实现Ajax下载文件

原创已于 2023-08-11 17:22:42 修改 · 6.1k 阅读

10 ·

CC 4.0 BY-SA版权

如果本篇文章帮到了你，兄台何不留个言再走？什么！不想留言？不想留言也要点个赞吗，也算是缘分一场......什么！赞都不想点？管理员拿我的三十米大刀来！【左侧点击关注按钮，精彩好文不容错过】

文章标签：

#javascript #ajax #okhttp

于 2019-06-23 01:29:32 首次发布

【Web前端技术】专栏收录该内容

45 篇文章

订阅专栏

博客介绍了使用原生JavaScript实现Ajax下载文件的内容，聚焦于信息技术中前端开发的相关操作，利用JavaScript和Ajax技术达成文件下载功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生JS实现Ajax下载文件

/**
* url 下载url
* filename 下载文件名称
*/
function download(url, filename) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true); 
  xhr.responseType = "blob"; // 设置返回类型为 blob
  
  // 设置请求头参数
  xhr.setRequestHeader('token', 'your_token_info');
  
  // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮的相关逻辑
  xhr.onload = function() {
    if (this.status === 200) {
      var blob = this.response;
      var a = document.createElement('a');
      var url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }
  };
  xhr.send(); // 发送ajax请求
}