easyExcel的写操作,联合前端,解决了数据传输,点击下载按钮不弹出下载框

直接上代码,

问题

Excel实体类

 

 需要一个实体类,声明在excel中写入的字段。@ExcelProperty注解是声明在excel中的列标题内容value值为列标题;

@ExcelIgnore注解是代表这个字段不需要在excel中生成;

controller层

 这是编写的controller层代码,中间取值为了以防万一,使用的是最笨的方法;当然也可以使用简单的get  set 方法进行赋值。

前端页面

增加了一个打印下载按钮

 

 正常写到这里,应该就完结了,但是他会出现一下情况

解决方法

前端代码

 这里我认为是编码格式的问题,这里写上解决方法;

还是原来的点击事件,再点击后,开始转变前端的表单类型就可以解决以上问题

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,以下是一个用 Vue、Element UI 和 SpringBoot EasyExcel 实现的前端下载文件按钮的示例代码: 1. 在 Vue 组件中,定义一个下载文件的方法: ```javascript <template> <div> <el-button type="primary" @click="downloadFile">下载文件</el-button> </div> </template> <script> import axios from 'axios'; import { Message } from 'element-ui'; export default { methods: { downloadFile() { axios({ url: '/api/download', method: 'get', responseType: 'blob', // 设置响应类型为二进制流 }).then((res) => { const blob = new Blob([res.data], { type: res.headers['content-type'], // 根据响应头获取文件类型 }); const fileName = res.headers['content-disposition'].split('=')[1]; // 根据响应头获取文件名 const url = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = fileName; link.click(); window.URL.revokeObjectURL(url); }).catch((error) => { Message.error('下载文件失败!'); console.error(error); }); }, }, }; </script> ``` 2. 在 SpringBoot 的 Controller 中,编一个下载文件接口: ```java @RestController @RequestMapping("/api") public class FileController { @GetMapping("/download") public ResponseEntity<byte[]> downloadExcel() throws IOException { // 使用 EasyExcel 生成 Excel 文件 String fileName = "test.xlsx"; List<List<Object>> data = new ArrayList<>(); data.add(Arrays.asList("姓名", "年龄", "性别")); data.add(Arrays.asList("张三", 18, "男")); data.add(Arrays.asList("李四", 20, "女")); ByteArrayOutputStream out = new ByteArrayOutputStream(); ExcelWriter writer = EasyExcel.write(out).build(); WriteSheet sheet = EasyExcel.writerSheet(0, "sheet1").build(); writer.write(data, sheet); writer.finish(); // 构造响应体 byte[] bytes = out.toByteArray(); HttpHeaders headers = new HttpHeaders(); headers.setContentDispositionFormData("attachment", fileName); headers.setContentType(MediaType.APPLICATION_OCTET_STREAM); return new ResponseEntity<>(bytes, headers, HttpStatus.OK); } } ``` 在以上代码中,我们使用 EasyExcel 生成一个测试用的 Excel 文件,并将其入一个 ByteArrayOutputStream 中。然后,我们构造一个 ResponseEntity 对象,将 ByteArrayOutputStream 中的数据作为响应体,设置响应头中的 Content-Disposition 和 Content-Type,最后返回 ResponseEntity 对象。 这样,当用户点击前端的“下载文件按钮时,就会向后端发送一个 GET 请求,后端返回响应就是一个文件下载前端通过 Blob 对象和 URL.createObjectURL() 方法将响应体转换为一个可下载文件,然后构造一个 a 标签进行下载

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值