前端vue+后端springboot实现页面下载文件

如果前端业务下载文件，需要表明responseType=‘blob’，例：

axios.post(`自己的下载地址`,"",{ responseType: 'blob' });

后端需要给ServletOutputStream传入ByteArrayOutputStream类型数据。此时以我之前写的报表下载为例子：

        XSSFWorkbook xb = new XSSFWorkbook();
        ByteArrayOutputStream os = new ByteArrayOutputStream();
        xb.write(os);
        xb.close();
        HttpServletResponse response=null;
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");
//设置文件为中文名称
       String fileName=new String("测试文件.xlsx".getBytes(),StandardCharsets.ISO_8859_1);
         //设置文件名
        response.addHeader("Content-Disposition","attachment;fileName=test.xlsx");
        //获取产生相应的流对象，request是从页面接收的
        ServletOutputStream outputStream = response.getOutputStream();
        //将数据从原始字节流对象提取出来写入到servlet对应的输出流中
        os.writeTo(outputStream);
        outputStream.flush();
        outputStream.close();

前端接收并设置文件名

exportData().then((res)=>{
        let blob = new Blob([res.data])
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob)
        downloadElement.href = href
        //前端设置文件名
        downloadElement.download = '数据导出.xlsx'
        document.body.appendChild(downloadElement)
        downloadElement.click()
        document.body.removeChild(downloadElement)
        window.URL.revokeObjectURL(href)
      })

到此页面下载业务就可以实现，点击按钮

实现下载