一、后端

  1. 导入依赖
  <dependency>
      <groupId>org.apache.poi</groupId>
      <artifactId>poi-ooxml</artifactId>
      <version>4.1.2</version>
  </dependency>
  1. 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);
    }
  1. 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>
GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:3 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 5 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐