前后端分离使用easyExcel实现浏览器下载

星晨羽

已于 2023-04-11 16:08:10 修改

阅读量465

点赞数

CC 4.0 BY-SA版权

文章标签： excel

于 2023-04-11 16:06:41 首次发布

本文链接：https://blog.csdn.net/xingchenyv/article/details/130086182

文章讲述了如何使用阿里巴巴的EasyExcel库在后端生成Excel文件并响应给前端。前端通过Axios发送GET请求，接收响应的Blob数据并创建下载链接，实现文件下载。整个过程涉及到了HTTP响应头的配置、文件类型设置以及前端的文件处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、依赖

<!-- https://mvnrepository.com/artifact/com.alibaba/easyexcel -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>easyexcel</artifactId>
    <version>3.2.1</version>
</dependency>

2、后端

    @ResponseBody
    @GetMapping(value = "/export")
    public void export(SupplierMasterData vo, HttpServletResponse response){
        //获取数据          
        List<SignContractVo> list = getWhole(queryWrapper);

        try {
            response.setContentType("application/vnd.ms-excel");// 设置文本内省
            response.setCharacterEncoding("utf-8");// 设置字符编码
            response.setHeader("Content-disposition", "attachment;filename=测试.xlsx"); // 设置响应头

            EasyExcel.write(response.getOutputStream(), SignContractVo.class)
                    .excelType(ExcelTypeEnum.XLSX)
                    .autoCloseStream(Boolean.FALSE)
                    .sheet("合同签订报表")
                    .doWrite(list);
        } catch (Exception e) {
            throw new ELSBootException(e.getMessage(), e);
        }
    }

3、前端请求

export function downFile (url, parameter) {
    return axios({
        url: url,
        params: parameter,
        method: 'get',
        responseType: 'blob'
    })
}

4、前端按钮事件

        handleExcel() {
            this.list.businessType = this._data.pageData.form.businessType
            this.list.supplierType = this._data.pageData.form.supplierType
            downFile(this.url.export, this.list).then((data) => {
                const blob = new Blob([data], {
                    type: 'application/vnd.ms-excel'
                });
                let link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                link.setAttribute('download', '测试.xlsx');
                link.click();
            })
        },