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

时间:2017-12-04 13:50:02

标签: angular download

我正在开展一个网络项目。我使用Spring Boot和Angular 2.我想创建CSV文件并从客户端PC上从服务器下载此文件。我使用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文件,并尝试从服务器上下载此文件到客户端的PC上:

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/csvtext/csv。我试过'OutputStream','response.getWriter().write()'对比我做错了什么?

1 个答案:

答案 0 :(得分:0)

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

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);
})

希望得到这个帮助。