javascript - 通过 Angular 2 下载文件

标签 javascript angular

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

Content-Disposition: attachment;filename=somefile.csv

它直接在浏览器中运行,并在调用指向该资源的 URL 后立即下载文件。

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

我希望用户停留在同一页面上,不打开任何新选项卡,只是让文件开始下载(就像直接调用 URL 时一样)。

这需要通过POST 请求 完成,因为我可以发送大量数据来确定需要下载哪些资源。

为此,Angular 2 端的调用是什么样的?我尝试了几件事,但显然走错了路。

如有任何帮助,我们将不胜感激!

最佳答案

当我尝试下载我的节点服务器发送的 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

希望对你有帮助

关于javascript - 通过 Angular 2 下载文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43029562/

相关文章:

javascript - 将鼠标悬停在另一个图像上时如何触发图像悬停效果?

javascript - 仅当文档中不存在提供者时才更新提供者数组并增加计数

javascript - 如何解决 "Cannot read property ' scrollIntoView' of undefined"?

node.js - 如何将 Node 模块下载到 Angular 2 项目

javascript - 加载时触发点击功能

javascript - 在不超过整个页面的最大宽度或高度的情况下保持元素的纵横比

javascript - 如何从html表单获取纬度经度值到谷歌地图

javascript - 导入第三方库

angular - 如何在 Angular CLI 1.1.1 版中将路由模块添加到现有模块?

angular - 如何知道@Input何时发生变化?