Ant Design Pro 下载文件的两种方式

window.open

使用浏览器托管的下载方式。

核心：使用axios的getUri方法获取下载的URL，然后直接适用window.open打开新页面。

好处：自动进行URL参数的Encoding。

注意：在后端需要设置Content-Type为application/octet-stream以及Content-Disposition为attachment;filename=test.csv。

缺点：如果适用JWT等鉴权则无法适用。（可以适用Cookie作为解决方案）

前端

const formValues = formRef.current?.getFieldsFormatValue?.();
const uri = axios.getUri({
  url: '/api/export',
  method: 'GET',
  params: {
    ...formValues
  },
  paramsSerializer: (params) => stringify(params, { arrayFormat: 'repeat' }),
});
window.open(uri);

后端

以Spring Boot为例。

@GetMapping("/api/export")
public void export(MyRequest request, HttpServletResponse response) throws IOException {
    log.info("[api][/export], params: {}", request);
    CSVFormat csvFormat = CSVFormat.DEFAULT.builder().setHeader("Name", "Type",).get();
    List<MyEntity> list = myMapper.export(request);
    try (
            OutputStreamWriter writer = new OutputStreamWriter(response.getOutputStream(), StandardCharsets.UTF_8);
            CSVPrinter printer = new CSVPrinter(writer, csvFormat)
    ) {
        response.setCharacterEncoding(StandardCharsets.UTF_8);
        response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);
        response.setHeader("Content-Disposition", "attachment;filename=export_" + OffsetDateTime.now() + ".csv");

        response.getOutputStream().write(0xEF);
        response.getOutputStream().write(0xBB);
        response.getOutputStream().write(0xBF);


        for (MyEntity e : list) {
            printer.printRecord(e.getName(), e.getType());
        }
        printer.flush();
    }
}

blob 内存构建

适用Umi.JS的request，设置responseType为blob。

const formValues = formRef.current?.getFieldsFormatValue?.();
const res = await request('/api/export', {
  method: 'GET',
  params: {
    ...formValues
  },
  responseType: 'blob',
});
const blob = new Blob([res])
const downloadElement = document.createElement('a');
const href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = `export_${Date.now()}.csv`; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象

备注

ProTable里QueryFilter的参数使用getFieldsFormatValue获取。这样就可以获得transform之后的字段（尤其适用Select多选，Date Range场景）。