在角度 5 / 6 中单击按钮时如何从 url 下载文件

Posted 2023-02-18

【中文标题】在角度 5 / 6 中单击按钮时如何从 url 下载文件

【英文标题】：How to download a file from a url when a button is clicked in angular5 / 6

【发布时间】：2019-08-30 11:00:05

【问题描述】：

我有一个网址：abc.net/files/test.ino 要求是通过 Angular 5 或 6 中的按钮单击事件下载 .INO 文件

【参考方案1】：

您可以创建一个锚标记以在按钮单击事件时下载文件

downloadMyFile()
    const link = document.createElement('a');
    link.setAttribute('target', '_blank');
    link.setAttribute('href', 'abc.net/files/test.ino');
    link.setAttribute('download', `products.csv`);
    document.body.appendChild(link);
    link.click();
    link.remove();

现在从您的按钮调用此函数

<button (click)="downloadMyFile()">download File<button>

【讨论】：

非常感谢侯赛因。工作正常！！

这个功能打开一个新窗口，但我想下载没有新窗口的文件

@AnandanK 你可以使用目标 _self 而不是 _blank

【参考方案2】：

你可以通过html让按钮看起来像一个锚元素，例如：

<a href="abc.net/files/test.ino">download</a>

您也可以尝试创建动态锚元素：

let link = document.createElement('a');
link.setAttribute('type', 'hidden');
link.href = 'abc.net/files/test.ino';
link.download = path;
document.body.appendChild(link);
link.click();
link.remove();

【讨论】：

非常感谢@AGR。这工作正常。如果可能，请提供角度级别的解决方案也用于知识目的（假设通过 http 模块调用 url）非常感谢

【参考方案3】：

如果你需要直接下载而不打开文件，那么如果你使用这些浏览器，你必须在chrome/opera中设置设置，

设置 -> 高级 -> 隐私和安全 -> 内容设置 -> PDF文件， 您会看到“下载 PDF 文件而不是在 Chrome 中自动打开它们”启用它。

然后将以下代码放入您的 HTML 文件中，

<a [href]="fileURL" target="_blank" class="btn btn-border" download="fileName.pdf">Download</a>

【参考方案4】：

添加到 Hussains 的答案，但只是使用 Renderer2 来做，因为它不建议直接使用文档。

import  Renderer2  from '@angular/core'
export class SomeComponent 
   constructor(private renderer: Renderer2) 
   
   downloadFile() 
      const link = this.renderer.createElement('a');
      link.setAttribute('target', '_blank');
      link.setAttribute('href', 'abc.net/files/test.ino');
      link.setAttribute('download', `products.csv`);
      link.click();
      link.remove();