Question

我正在开发一个angular2项目，我在assets文件夹中有一个文件，我在运行应用程序时创建了一个下载文件的按钮。

我看到上述问题有很多解决方案让我感到困惑。你能帮忙吗？

<button pButton type="button" (click)="f1()" label="Download Sample Defaults 
XML File"></button>

我需要f1（）的代码，这可以帮助我在点击上面的按钮时将文件下载到我的下载文件夹。帮助赞赏。感谢

Answer 1

您可以将锚元素设置为看起来像按钮，并将其设置为href到assets / file

<a href="assets/file">Download here</a>

或者动态创建一个锚元素，设置它的href元素并单击它。

类似的东西：

let link = document.createElement('a');
link.setAttribute('type', 'hidden');
link.href = 'assets/file';
link.download = path;
document.body.appendChild(link);
link.click();
link.remove();

Answer 2

您无需更改模板。用这种方式

f1() {
    window.open('path', '_blank');
}

例如：

f1() {
   window.open('/assets/images/blabla.png', '_blank');
}

<强>更新

如果您需要下载文件而不是打开新标签，请使用带有html5 下载属性的链接例如：

<a download="filename" target="_blank" href="/assets/images/blabla.png">
  Click here to download image
</a>

Answer 3

你可以试试这个。将文件放在 assets 中，并在 href 中给出路径。

<a class="iconsBG" title="Excel" href='/assets/Project-2021-05-17T10_41_22.378Z.xlsx' download="Project-2021-05-17T10_41_22.378Z.xlsx"><i class="far fa-file-excel"></i></a>

Answer 4

你可以尝试这个解决方案

ts文件代码

downloadFile(){
        let link = document.createElement("a");
        link.download = "filename";
        link.href = "assets/images/user-image.png";
        link.click();
}

html文件代码

<button (click)="downloadFile()">Download</button>

Answer 5

这应该可以工作，简短而又可爱，通过“下载”和“＃”-“ yoclickme”可以实现

<a href="{{ this.fileurl }}" download #yoclickme></a> 
    <button (click)="yoclickme.click()"> Download </button>

单击按钮时从资产文件夹下载文件

5 个答案: