通过Angular 2下载文件

Question

我有一个后端,我设置通过设置标头返回一个文件

Content-Disposition: attachment;filename=somefile.csv

它直接在浏览器中工作,并在调用指向该资源的URL时立即下载文件.

我的目标是在Angular 2模板中有一个按钮.当用户单击该按钮时,我需要从客户端收集一些数据(某些ID)并将其发送到服务器以调用该文件下载URL.

我希望用户保持在同一页面上并且没有打开任何新标签但只是让文件开始下载(就像直接调用URL一样).

它需要通过POST请求来完成,因为我可以发送相当多的数据来识别需要下载的资源.

Angular 2方面的调用对此是什么样的？我尝试了几件事,但显然我走错了路.

任何帮助,将不胜感激!

Answer 1

当我尝试下载我的节点服务器发送的PDF文件时,我遇到了类似的问题.我正在我的服务器上发出一个带有一些id细节的GET请求.这对我有用.

功能调用我的服务

printBill(receiptID) {
this.BillingService.printBill(receiptID)
    .subscribe(res => {
        saveAs(res,"InvoiceNo"+receiptID+".pdf");
        let fileURL = URL.createObjectURL(res);
        window.open(fileURL);
    })
}

服务

printBill(billID) {
    return this.http.get('/billing/receipt/'+billID, 
                   { responseType: ResponseContentType.Blob })
      .map((res) => {
            return new Blob([res.blob()], { type: 'application/pdf' })
        })
}

并且不要忘记导入ResponseContentType

希望这对你有所帮助

Answer 2

我已经这样实现了。

我有一项请求文件下载的服务。响应返回一个 url，该 url 位于 amazon s3 上。这是一个 zip 文件，其中包含我要下载的内容。

以下内容适用于所有浏览器。

在你的控制器中

requestDownload() {

this.downloadservice.downloadImages(obj)
      .subscribe(
        response => this.download(response )
      );

}

// res is an object
download(res){ 
    var link = document.createElement("a");
    link.download = "a";
    link.href = res.link;
    document.body.appendChild(link);
    link.click();

     }

下载服务文件

downloadImages(body): Observable<any>{

        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        return this.http.post("/Camera51Server/getZippedImages", body, options)
            .map((res:Response) => res.json())
            .catch(this.handleError);
    }

如果您愿意，我可以给您一个存储库的链接。