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

【问题标题】：How to download a file from a url when a button is clicked in angular5 / 6在角度 5 / 6 中单击按钮时如何从 url 下载文件
【发布时间】：2023-03-30 16:09:01
【问题描述】：

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

【问题讨论】：

标签： angular angular6 angular5

【解决方案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();
   }
}

【讨论】：