vue+axios以流的形式下载文件

实现的方法有很多，这边只是提供一个Demo，该Demo可用。

说下思路：后端提供文件流（如果后端提供下载链接的话就没这么麻烦了，location.href也好也好都可以），前端用Blob对象读取流并使用标签进行下载。

前端代码
axios的语法结构详见文档 传送门

axios.post(
        'a.bbb.cc/d/ee',//请求的url
        {
            'data':this.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'

            //对于标签，只有 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);
      })

图1

后端部分代码

public void export(HSSFWorkbook workbook, String fileName, HttpServletResponse response) throws Exception{

        if(workbook !=null) {
            String headStr = "attachment; filename=\"" + fileName + "\"";
            response.setContentType("APPLICATION/OCTET-STREAM");//返回格式为流
            response.setHeader("Content-Disposition", headStr);
            OutputStream out = response.getOutputStream();
            workbook.write(out);
        }
    }