Javascript 通过Angular 2下载文件
我设置了一个后端,通过设置头返回一个文件Javascript 通过Angular 2下载文件,javascript,angular,Javascript,Angular,我设置了一个后端,通过设置头返回一个文件 Content-Disposition: attachment;filename=somefile.csv 它直接在浏览器中工作,并在调用指向该资源的URL时立即下载该文件 我的目标是在Angular 2模板中有一个按钮。当用户单击该按钮时,我需要从客户端收集一些数据(一些ID),并将其发送到服务器以调用该文件下载URL 我希望用户保持在同一个页面上,不打开任何新的选项卡,而只是让文件开始下载(就像直接调用URL一样) 这将需要通过一个POST请求来完
Content-Disposition: attachment;filename=somefile.csv
它直接在浏览器中工作,并在调用指向该资源的URL时立即下载该文件
我的目标是在Angular 2模板中有一个按钮。当用户单击该按钮时,我需要从客户端收集一些数据(一些ID),并将其发送到服务器以调用该文件下载URL
我希望用户保持在同一个页面上,不打开任何新的选项卡,而只是让文件开始下载(就像直接调用URL一样)
这将需要通过一个POST请求来完成,因为我可以发送相当多的数据来确定需要下载的资源
对于这个,角度2侧的调用是什么样子的?我尝试了几件事,但我显然走错了路
任何帮助都将不胜感激 我是这样实现的 我有一个服务请求文件下载。响应返回一个url,它位于AmazonS3上。这是一个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);
}
下载图像(正文):可观察{
let headers=新的头({'Content-Type':'application/json'});
let options=newrequestoptions({headers:headers});
返回此.http.post(“/Camera51Server/getZippedImages”,正文,选项)
.map((res:Response)=>res.json())
.接住(这个.把手错误);
}
如果您愿意,我可以给您一个指向存储库的链接。我在尝试下载节点服务器发送的PDF文件时遇到类似问题。我在我的服务器上请求获取一些id详细信息。 这就是我的工作 调用我的服务的函数
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
希望这对您有所帮助谢谢,但这正是我想要了解的。另外,它需要更多的服务器端工作来以某种方式识别与新请求关联的先前请求。记住,我正在发送大量数据以确定需要下载的内容,所以我需要这篇文章。如果我返回一个URL,然后让浏览器再次请求该URL,并将这些结果存储在某个地方,那将有点不太方便。。。我需要它在一次调用中全部发生,我想知道Angular 2(http.post调用)是什么样子的;link.download=“a”;link.href=res.link;document.body.appendChild(链接);link.click()代码>@ShivamMaheshwari,如果您需要访问令牌来获取image@chris31389:是的,但是当您点击API以获取图像作为URL,然后让用户下载文件(这是我的用例)时,它的工作非常出色,
saveAs
在哪里定义?它的作用是什么?saveAs()用于将服务器返回的文件保存在客户端。它来自FileSaver.js。这是git链接,我不太熟悉Blob,但它会将整个内容加载到内存中,因此不适合大量下载,对吗?