JavaWeb后端将excel文件传输到前端浏览器下载(SpringBoot+Vue3)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
一、后端
- 导入依赖
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml</artifactId>
<version>4.1.2</version>
</dependency>
- 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);
}
- 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
82
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079
[skip ci] 2 个月前
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> 6 个月前
更多推荐
已为社区贡献8条内容
所有评论(0)