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，这是在亚马逊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);
    }

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

通过Angular 2下载文件

2 个答案: