Springboot + Vue + axios实现excel的导出下载

后端代码

pom

       <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>3.17</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.apache.poi/poi-ooxml -->
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>3.17</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.apache.poi/poi-ooxml-schemas -->
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml-schemas</artifactId>
            <version>3.17</version>
        </dependency>

controller

 @RequestMapping("downloadExcel")
    @ResponseBody
    public void downloadExcel(HttpServletResponse response){
        try {
            goodService.exportDataToEx(response);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

service

 public void exportDataToEx(HttpServletResponse response) throws IOException {
        HSSFWorkbook workbook = new HSSFWorkbook();
        HSSFSheet sheet = workbook.createSheet("商品信息表");
        List<Good> goodList = goodMapper.getAllExcelGood();
        // 设置要导出的文件的名字
        SimpleDateFormat sf = new SimpleDateFormat("yyyyMMddHHmmss");
        String fileName = "goodinfo"  + sf.format(new Date()) + ".xls";

        // 新增数据行，并且设置单元格数据
        int rowNum = 1;
        // headers表示excel表中第一行的表头 在excel表中添加表头
        String[] headers = { "ID", "商品条码", "名称", "类型","规格","建议零售价","我的零售价","库存预警量"};
        HSSFRow row = sheet.createRow(0);
        for(int i=0;i<headers.length;i++){
            HSSFCell cell = row.createCell(i);
            HSSFRichTextString text = new HSSFRichTextString(headers[i]);
            cell.setCellValue(text);
        }
        //在表中存放查询到的数据放入对应的列
        for (Good item : goodList) {
            HSSFRow row1 = sheet.createRow(rowNum);
            row1.createCell(0).setCellValue(item.getId());
            row1.createCell(1).setCellValue(item.getBarcode());
            row1.createCell(2).setCellValue(item.getTitle());
            row1.createCell(3).setCellValue(item.getTypeid());
            row1.createCell(4).setCellValue(item.getWeight());
            row1.createCell(5).setCellValue(item.getPrice());
            rowNum++;
        }
        response.setContentType("application/octet-stream");
        response.addHeader("Access-Control-Expose-Headers", "Content-Disposition");
        response.setHeader("Content-disposition", "attachment;filename=" + fileName);
        response.flushBuffer();
        OutputStream outputStream = response.getOutputStream();
        workbook.write(response.getOutputStream());
        outputStream.flush();
        outputStream.close();
    }

Vue前端代码

      axios({
          method: 'post',
          url:requesturl,
          responseType: 'blob'
        })
      .then(res => {
        const filename = decodeURI(res.headers['content-disposition'].split(';')[1].split('=')[1]) || '商品信息表.xls'
        const blob = new Blob([res.data], {
        type: 'application/octet-stream'
      })
        let url = window.URL.createObjectURL(blob);
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', filename);
        document.body.appendChild(link);
        link.click()
      })

遇到的问题

1.response返回了包含响应头所带的所有数据，可以使用console.log(response）查看打印数据，但是打印出来的数据只能拿到默认的响应头，这里有个需要注意的地方。

Cache-Control

Content-Language

Content-Type

Expires

Last-Modified

Pragma

如果想让浏览器能访问到其他响应头的话，需要后端在服务器上设置Access-Control-Expose-Headers

 response.addHeader("Access-Control-Expose-Headers", "Content-Disposition");
 response.setHeader("Content-disposition", "attachment;filename=" + fileName);

这样response.headers[‘content-disposition’].split(’;’)[1].split(’=’)[1] 就能取到接口返回的文件名称了。