blob下载数据流文件

blob下载数据流文件,原生请求、fetch请求、axios请求都试过了，都出现跨域问题。

前端接受后端文件流并下载的几种方法var blob = new Blob([content]); URL.createObjectURL(blob);

function request(url,data) {
   axios.post(
    url,//请求的url
      {
         'data': data//请求数据
      },
      {
         responseType: 'blob'//服务器返回的数据类型
      }
   ).then((res) => {
      //此处有个坑。这里用content保存文件流，最初是content=res，但下载的test.xls里的内容如下图1，
      //检查了下才发现，后端对文件流做了一层封装，所以将content指向res.data即可
      //另外，流的转储属于浅拷贝，所以此处的content转储仅仅是便于理解，并没有实际作用=_=
      const content = res.data
      const blob = new Blob([content])//构造一个blob对象来处理数据
      const fileName = 'test.xls'

      //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
      //IE10以上支持blob但是依然不支持download
      if ('download' in document.createElement('a')) { //支持a标签download的浏览器
         const link = document.createElement('a')//创建a标签
         link.download = fileName//a标签添加属性
         link.style.display = 'none'
         link.href = URL.createObjectURL(blob)
         document.body.appendChild(link)
         link.click()//执行下载
         URL.revokeObjectURL(link.href) //释放url
         document.body.removeChild(link)//释放标签
      } else { //其他浏览器
         navigator.msSaveBlob(blob, fileName)
      }

   }).catch((err) => {
      console.log(err);
   })
}

原生XMLHttpRequest

function request(url,data) {
   data = JSON.stringify(data)
   const req = new XMLHttpRequest();
   req.open('POST', url , true);
   req.responseType = 'blob';
   req.setRequestHeader('Content-Type', 'application/json');
   req.onload = function () {
      const data = req.response;
      const blob = new Blob([data]);
      const blobUrl = window.URL.createObjectURL(blob);
      download(blobUrl);
   };
   req.send(data);
};

function download(blobUrl) {
   const a = document.createElement('a');
   console.log(a,'a----');
   
   a.style.display = 'none';
   a.download = 'download';
   a.href = blobUrl;
   a.click();
   document.body.removeChild(a);
}