axios下载文件

最新推荐文章于 2024-05-09 14:46:33 发布

原创最新推荐文章于 2024-05-09 14:46:33 发布 · 483 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #html #javascript

Vue 专栏收录该内容

2 篇文章

订阅专栏

该博客详细介绍了如何通过axios在前端实现从后端下载文件。前端使用axios发送GET请求，设置responseType为'blob'，获取到响应后创建Blob对象，并利用a标签实现文件下载。后端通过设置response的Content-Type和Content-Disposition头，确保文件能够正确下载。同时，提供了针对IE和其他浏览器的兼容解决方案。

1. axios端

发送请求
获得response流文件
如果是文件则在页面中插入a标签
利用a标签实现浏览器的get下载

      instance.get('url',{
        params: {
          path: 'xxx'
        },
        responseType: 'blob'
      }).then(res => {
        const { data, headers } = res
        const fileName = headers['Content-Disposition'].replace(/\w+;filename=(.*)/, '$1')
        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName );
        document.body.appendChild(link);
        link.click();
      });

2. java端response暴露请求头Content-Disposition，方便前端获取

// 设置输出的格式
httpServletResponse.reset();
httpServletResponse.setContentType("application/octet-stream");
httpServletResponse.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
httpServletResponse.setHeader("Content-Disposition", "attachment;filename=" + new String(filename.getBytes("gbk"),"iso8859-1"));

3. 前端兼容方案

          let blob = new Blob([response.data]);//response.data为后端传的流文件
          let downloadFilename = xxx.docx;//设置导出的文件名
          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);
          }