前端模拟实现postman的send-and-download进行文件下载

最新推荐文章于 2024-08-05 17:27:58 发布

置顶 Э时间行者于我

最新推荐文章于 2024-08-05 17:27:58 发布

阅读量9.3k

点赞数 10

分类专栏： Vue js 文章标签： postman javascript vue

本文链接：https://blog.csdn.net/qq_45094682/article/details/119937772

版权

js 同时被 2 个专栏收录

49 篇文章 1 订阅

订阅专栏

Vue

47 篇文章 3 订阅

订阅专栏

本文档介绍了前端如何处理后端返回的文件流进行下载，包括从最初的通过URL直接下载，到改用axios设置responseType为'blob'接收文件流，兼容不同浏览器实现下载功能。详细代码展示了在接收到文件流后，如何转化为Blob对象，并创建隐藏的a标签进行文件下载。同时，文件名使用当前时间戳进行动态生成，确保每次下载的文件名不同。

摘要由CSDN通过智能技术生成

今天在合后端做需求的时候，后端返文件流的形式前端解析并下载

后端接口返回文件流,使用postman的send and download可以直接将文件下载

主要参考第二种

202132165412

1.刚开始的时候是这种下载

后端返URL前端直接进行下载，创建a标签并下载

exportArcelAttachment({..._this.args.search}).then(function (res){
      let ulrs = res.data  //这块返的直接是个URL链接
      let link = document.createElement('a')
      link.style.display = "none"
      link.href = ulrs
      link.setAttribute('download', 'product.xls')
      document.body.appendChild(link)
      link.click()
  })

2.后来改成现在的下载模式了

注意这块在请求的时候加上请求头responseType : 'blob',

export const exportSupplement = (params) => { //批量导出
    return axios.request({
        url: '/logistics-engine/arcelreconciliation/exportSupplement',
        responseType : 'blob', //重要
        method: 'post',
        data: {
            args: JSON.stringify(params)
        }
    })
}

exportSupplement({..._this.args}).then(function (res) { //导出流
   console.log(res,'导出')
   let blob = new Blob([res.data]);//response.data为后端传的流文件
   let downloadFilename = '小包对账数据'+ _this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')+ ".xlsx";//设置导出的文件名  用moment时间插件对文件命名防止每次都是一样的文件名
   if (window.navigator && window.navigator.msSaveOrOpenBlob) {
   //兼容ie浏览器
       window.navigator.msSaveOrOpenBlob(blob, downloadFilename)
   }else {
   //谷歌,火狐等浏览器
       let url = window.URL.createObjectURL(blob);
       let downloadElement = document.createElement("a");
       downloadElement.style.display = "none";
       downloadElement.href = url;
       downloadElement.download = downloadFilename;
       document.body.appendChild(downloadElement);
       downloadElement.click();
       document.body.removeChild(downloadElement);
       window.URL.revokeObjectURL(url);
   }
   _this.$Message.success('导出成功！')
   }).catch(function (err) {
      console.log(err)
  }).finally(function () {
      _this.tableLoading = false;
  })