解决导出excel表格无法打开的问题

本文介绍了一种前后端分离环境下实现Excel导出的方法,后端使用easyexcel处理数据并写入响应流,前端通过设置responseType为arraybuffer实现文件下载。详细展示了Java后端代码和TypeScript前端代码示例。

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

前后端分离实现导出excel,后端使用easyexcel将数据写入excel表格,然后将其写入到响应流中,关于easyexcel的快速使用可参考文章:JAVA使用easyexcel导出excel

后端主要代码如下:

public <T extends BaseRowModel> void exportExcel(HttpServletResponse response, List<T> excelModel,
			String fileName) {
		try (OutputStream out = response.getOutputStream()) {
			ExcelWriter writer = new ExcelWriter(out, ExcelTypeEnum.XLSX);
			if (!excelModel.isEmpty()) {
				Sheet sheet = new Sheet(1, 0, excelModel.get(0).getClass());

				fileName = URLEncoder.encode(fileName, "UTF-8");
				sheet.setSheetName(fileName);
				response.setCharacterEncoding("UTF-8");
				response.addHeader("Content-Disposition", "attachment;filename=" + fileName);
				writer.write(excelModel, sheet);
			}
			writer.finish();
		} catch (Exception e) {
			throw new ApplicationException("导出excel错误", e);
		}
	}

上述代码中使用泛型使得导出excel代码更为通用。

前端逻辑代码使用typescript完成,代码示例如下:

function getFile(url: string, data: any, fileName: string): Promise<any> {
    return new Promise((success, fail) =>  {
        handleRequest(get(url,
        {params: data,
            responseType: 'arraybuffer'},
        )).then(
        (res) => {
            const blob: Blob = new Blob([res.data]);
            const downloadElement = document.createElement('a');
            const href = window.URL.createObjectURL(blob);
            downloadElement.href = href;
            downloadElement.download = fileName;
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement);
            window.URL.revokeObjectURL(href);
            success('导出成功');
        }).catch((e) => {
            fail(e);
        });
    });
}

前端最关键的就是要设置responseType的值为blob或者arraybuffer,否则就会导致下载下来的excel表格无法打开.

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值