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

Question

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

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

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

我需要f1（）的代码，当单击上面的按钮时，该代码可以帮助我将文件下载到我的“下载”文件夹中。帮助表示赞赏。谢谢

Answer 1

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

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 2

你可以试试这个解决方案

.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 3

您可以设置锚元素的样式以使其看起来像一个按钮，并将其href设置为素材资源/文件

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