Javascript 通过 Angular 2 下载文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43029562/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
File download through Angular 2
提问by user1902183
I have a backend that I set up to return a file through setting the header
我有一个后端，我将其设置为通过设置标题来返回文件
Content-Disposition: attachment;filename=somefile.csv
It works directly in the browser and downloads the file immediately upon invoking the URL that points to that resource.
它直接在浏览器中工作，并在调用指向该资源的 URL 后立即下载文件。
My goal is to have a button in an Angular 2 template. When the user clicks that button, I'd need to collect some data from the client-side (some IDs) and send it to the server to invoke that file download URL.
我的目标是在 Angular 2 模板中有一个按钮。当用户单击该按钮时，我需要从客户端收集一些数据（一些 ID）并将其发送到服务器以调用该文件下载 URL。
I'd like the user to stay on the same page and not have any new tabs open up but simply have the file start downloading (just like when the URL is invoked directly).
我希望用户停留在同一页面上并且没有打开任何新选项卡，而只是让文件开始下载（就像直接调用 URL 时一样）。
It will need to be done through a POST requestbecause I can have quite a bit of data to send to identify what resource needs to be downloaded.
这需要通过POST 请求来完成，因为我可以发送大量数据来确定需要下载哪些资源。
What does the call on the Angular 2 side look like for this? I tried a couple of things but I am obviously on the wrong path.
Angular 2 端的调用是什么样的？我尝试了几件事，但显然我走错了路。
Any help would be appreciated!
任何帮助，将不胜感激！
回答by Kiran Shenoy
I had a similar issue when i was trying to download a PDF file which my Node server was sending. I was making a GET request on my server with some id details. This is what worked for me.
当我尝试下载我的 Node 服务器发送的 PDF 文件时，我遇到了类似的问题。我在我的服务器上发出 GET 请求，其中包含一些 ID 详细信息。这对我有用。
Function Calling my service
函数调用我的服务
printBill(receiptID) {
this.BillingService.printBill(receiptID)
.subscribe(res => {
saveAs(res,"InvoiceNo"+receiptID+".pdf");
let fileURL = URL.createObjectURL(res);
window.open(fileURL);
})
}
Service
服务
printBill(billID) {
return this.http.get('/billing/receipt/'+billID,
{ responseType: ResponseContentType.Blob })
.map((res) => {
return new Blob([res.blob()], { type: 'application/pdf' })
})
}
And dont forget to import ResponseContentType
并且不要忘记导入 ResponseContentType
Hope this helps you
希望这对你有帮助
回答by Roninio
i have implemented it like this.
我已经这样实现了。
i have a service requesting file download. The response return a url, which is on amazon s3. This is a zip file containing what i want to download.
我有一项请求文件下载的服务。响应返回一个 url，它位于 amazon s3 上。这是一个包含我要下载的内容的 zip 文件。
the below works on all browsers.
以下适用于所有浏览器。
in your controller
在你的控制器中
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();
}
downloadservice file
下载服务文件
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);
}
if you like i can give you a link to the repository.
如果你愿意，我可以给你一个存储库的链接。
