原创

springboot + easyExcel + vue axios 实现excel下载

温馨提示:
本文最后更新于 2023年03月08日,已超过 402 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

前几天有个需求,导出excel,我想着简单啊,暂时不管,当我今天写的时候才发现,这玩意居然下载不了。嗯哼,那我就讲一下具体的实现吧。

1. 导入依赖文件

 <dependency>
        <groupId>com.alibaba</groupId>
         <artifactId>easyexcel</artifactId>
         <version>3.1.1</version>
 </dependency>

2. 写controller接口

file
这块别忘了写HttpServletResponse

3. 查询数据 以Collection子集为返回类型

我这边使用mybatis-plus查询的,直接返回的list
file

4. 设置响应头

        // 设置response
        response.setContentType("application/vnd.ms-excel");
        response.setCharacterEncoding("utf8");
        response.addHeader("Access-Control-Expose-Headers", "Content-disposition");
        // 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
        String fileName = URLEncoder.encode("用户扫码记录", "UTF-8");
        response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");

5. 调用excel进行写数据

outputStream = response.getOutputStream();
EasyExcel.write(outputStream, UserShareCourseDto.class).sheet().doWrite(collect);
outputStream.flush();

先获取到outputstream,然后调用
后端这就完了

6. 写导出按钮

file

7. 写方法

this.downRequest("/excel/user-share-course")
          .then((res) => {
            let blob = new Blob([res]);
            let downloadElement = document.createElement("a");
            let href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = `用户扫码记录.xlsx`; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
            this.loading = false
          })

这块我的downRequest是封装的axios
file
然后就完成了,我们打开页面点击导出就ok了

正文到此结束
本文目录