vue 原生js请求接口并下载文件三种方法axios fetch XMLHttpRequest

贺今宵

已于 2022-11-29 16:51:31 修改

阅读量2.9k

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端

于 2022-11-24 10:15:58 首次发布

本文链接：https://blog.csdn.net/qq_51389137/article/details/128012960

版权

vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

const row = this.handleEditRowData;
const Url = `http://`;
let fileName = '文件名';
let _this = this;
//1.axios
axios
  .get(Url, {
    responseType: "blob",
  })
  .then((res) => {
    //把文件内容转为转为blob对象 type默认为txt,其他格式需对应设置此处zip
    let blob = new Blob([res.data],{ type: 'application/zip' });
    let url = window.URL.createObjectURL(blob);
    //创建临时的a链接添加点击事件用于下载以下为a标签方法
    let a = document.createElement("a");
    a.href = url;
    a.download = fileName;
    a.click();
    //释放url
    window.URL.revokeObjectURL(url);
//之后的操作
  });
//发请求

//2.fetch
fetch(Url, {
      method: 'Get',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
    }).then(res => {
      res.blob().then(blob => {
const blobUrl = window.URL.createObjectURL(blob);
const a = window.document.createElement('a');
a.href = Url;
a.download = fileName;
a.click();
    window.URL.revokeObjectURL(blobUrl);
 _this.directUpdate();
  });
});
//原生的XMLHttpRequest对象方法此处没有设置application格式 文件名后缀加zip一样效果
let xhr = new XMLHttpRequest();
xhr.open("GET", Url, true); // 也可以使用POST方式，根据接口
//写入请求头
    xhr.setRequestHeader("Content-type", "application/json")
xhr.responseType = "blob";
xhr.onprogress = function (event) {};
xhr.onload = function () {
  if (this.status === 200) {
    let content = this.response;
    let aTag = document.createElement("a");
  let blob = new Blob([res.data],{ type: 'application/zip' });
    aTag.download = fileName;
    aTag.href = URL.createObjectURL(blob);
    aTag.click();
    URL.revokeObjectURL(blob);
    loading.close();
    _this.directUpdate();
  }
};
xhr.send()
//不写请求头·可以在文件名后加 '.zip'