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

【问题标题】：Download a file from asset folder when clicking on a button单击按钮时从资产文件夹下载文件
【发布时间】：2018-11-27 04:27:52
【问题描述】：

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

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

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

我需要 f1() 的代码，当单击上面的按钮时，它可以帮助我将文件下载到我的下载文件夹。帮助表示赞赏。谢谢

【问题讨论】：

f1 是做什么的？
还没有，它只是用来填充空间。如果我删除它就不会了。

标签： angular angular2-services angular-http

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

【讨论】：

UI 端很好，我需要实际功能的帮助来获取文件。我正在从 pranayamr.blogspot.com/2017/12/… 那里获得帮助，但它没有帮助
你的问题没有意义
是的，我现在修改了。谢谢
伟大的编辑......所以我确实理解了你的问题，我确实为你提供了答案。
link.download 包含要下载的文件的所需名称。因此，如果您希望下载的文件被称为“My File.csv”，则可以将其修改为link.download: 'My File.csv'

【解决方案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>

【讨论】：

是的，它会在另一个选项卡中打开文件，但我需要下载文件的功能，这样我才能在我的下载文件夹中看到它。谢谢
window.open 创建一个弹出窗口，大多数情况下都会被浏览器阻止。

【解决方案3】：

你可以试试这个解决方案

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>

【讨论】：

是的，你给出了确切的答案，但我已经从@Carsten 的答案中弄清楚了。所以
嘿，我们可以试试 httpclient 吗？

【解决方案4】：

你可以试试这个。将文件放在 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>

【讨论】：

【解决方案5】：

这应该可以工作，简短而简单，“下载”和“#”-“yoclickme”使它工作

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

【讨论】：