JavaWeb后端将excel文件传输到前端浏览器下载(SpringBoot+Vue3)

一、后端

1. 导入依赖

  <dependency>
      <groupId>org.apache.poi</groupId>
      <artifactId>poi-ooxml</artifactId>
      <version>4.1.2</version>
  </dependency>

2. controller层
   其中@RequestParam String moveNo是前端传入的参数，而HttpServletResponse response不是，前者可以没有，后者一定要有。

    @GetMapping("/yourControllerApi")
    public AjaxResult exportData(@RequestParam String moveNo, HttpServletResponse response){
        System.out.println(moveNo);
        System.out.println(response);
        return stockMgntService.exportData(moveNo, response);
    }

3. service层

@Service
public class StockMgntServiceImpl implements StockMgntService {
@Override
    public AjaxResult exportData(String moveNo, HttpServletResponse response) {
    //这里是从后台resources文件夹下读取一个excel模板
	ClassPathResource resource = new ClassPathResource("template/模板.xlsx");
        try(InputStream fis = resource.getInputStream();
            Workbook workbook = WorkbookFactory.create(fis);
            ServletOutputStream os = response.getOutputStream()
        ){
        	//这块写入你的数据
        	//往第一个sheet的第一行的第2列和第5列写入数据
        	Sheet sheet = workbook.getSheetAt(0);
            sheet.getRow(0).getCell(1, Row.MissingCellPolicy.CREATE_NULL_AS_BLANK).setCellValue("test");
            sheet.getRow(0).getCell(5, Row.MissingCellPolicy.CREATE_NULL_AS_BLANK).setCellValue("test");
            /*......你的操作......*/
            //这块开始配置传输
			response.setCharacterEncoding("UTF-8");
            response.setContentType("application/vnd.ms-excel");
            response.setHeader("Content-disposition", "attachment;filename=template.xlsx");
            response.flushBuffer();
            workbook.write(os);
            os.flush();
            os.close();
        }catch (IOException e) {
			throw new RuntimeException(e);
		}
		return null;
	}
}

二、前端

axios向对应api发送请求并携带参数，然后使用Blob来接收后端的OutputStream输出流并保存下载保存到本地浏览器。

<template>
	<el-button type="primary" @click="downloadData" size="small" plain>模板下载</el-button>
</template>

<script setup>
const downloadData = () => {
	console.log(queryParams.moveNo)
	axios({
        url: '/yourControllerApi',
        method: 'get',
        params: {moveNo:'0000212132142'},
        responseType: "blob"
    }).then(rp=>{
		console.log(rp)
		const blob = new Blob([rp], {type: 'application/vnd.ms-excel'});
		let link = document.createElement('a');
		link.href = URL.createObjectURL(blob);
		link.setAttribute('download', '模板下载.xlsx');
		link.click();
		link = null;
	});
}
</script>