angular - 浏览器不下载我创建的 CSV 文件

Question

我正在做一个网络项目。我使用 Spring Boot 和 Angular 2。我想创建 CSV 文件并将此文件从服务器下载到客户端电脑上。我使用 Apache Poi 创建 CSV 文件。当我单击“导出 CSV”按钮时，我可以通过服务从前端传递到后端，并且可以在服务器上成功创建 CSV 文件。这是服务代码:

exportCSVFileTest(parameter: string): Observable<any> {
    return this.httpService.post( super.getAddrApi() + parameter , null )
        .catch( err => {
            if (!err.status) {
                err = {
                    status: Observable.throw(401)
                };
            }
            return Observable.throw(err);
        });
}

使用此服务后，我在服务器上创建了 CSV 文件，并尝试从服务器将此文件下载到客户端的电脑上:

response.setContentType("application/octet-stream");
        response.setHeader("Content-Disposition",
                "attachment;filename=" + file.getName());
        FileInputStream is = new FileInputStream(file);
        ServletOutputStream out = response.getOutputStream();
        byte[] outputByte = new byte[4096];
        while(is.read(outputByte, 0, 4096) != -1)
        {
            out.write(outputByte, 0, 4096);
        }

        is.close();
        out.flush();
        out.close();

在那之后我没有收到任何错误。一切似乎都很好，但是文件上传过程应该出现的窗口没有出现。我尝试了不同的方法，例如我设置了内容类型 application/csv 或 text/csv。我尝试了“OutputStream”、“response.getWriter().write()”与我做错了什么？

Answer 1

要下载一个文件，您需要告诉浏览器它是一个下载文件，我知道有两种方法可以做到这一点:

1 - 使用 HTML 中的链接下载文件

<a [routerLink]="['url/to/download/the/file']">Download CSV</a>

2 - 使用您的服务获取文件并使用 saveAs 下载图书馆

import {saveAs} from 'file-saver';

this.service.exportCSVFileTest('parameter').subscribe(response => {
    const filename = 'name of the file.csv';
    saveAs(response.blob(), filename);
})

希望这对您有所帮助。