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

Question

我有一个 url 例如：abc.net/files/test.ino 需求是在angular5或6

中通过按钮点击事件下载一个.INO文件

Answer 1

您可以通过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();

Answer 2

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

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>

Answer 3

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

设置 -> 高级 -> 隐私和安全 -> 内容设置 -> PDF文档, 你看"Download PDF files instead of automatically opening them in Chrome"启用它。

之后将下面的代码放入您的 HTML 文件中，

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

Answer 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();
   }
}

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

How to download a file from a url when a button is clicked in angular5 / 6

angular

angular5

angular6