下载文件链接在Angular中不起作用

时间:2018-04-04 09:30:32

标签: angular download href

我的Angular网站应用程序中有一个33 KB的pdf文件

src/app/components/landing-page/res/File.pdf

在我的landing-page.component.html中,它位于着陆页文件夹中,我编写了以下行以允许下载该文件。

My File <a href="./res/File.pdf" download="File.pdf">here</a>.

但是,当我使用ng serve在浏览器中打开应用程序并单击该链接时,会下载无法打开的705 B File.pdf。超链接显示为链接到http://localhost:4200/res/File.pdf,我认为这是问题的根源,因为此文件路径可能仅在角度框架中有效。

2 个答案:

答案 0 :(得分:4)

尝试此操作,如下所示,浏览器将执行整页重新加载到原始链接。

  • 包含目标元素的链接:

    <a href="/ext/link?a=b" target="_self">link</a>

  • 绝对链接:

    <a href="http://angularjs.org/">link</a>

  • 以“/”开头的链接,在基数时会导致不同的基本路径 定义如下:

    <a href="/not-my-base/link">link</a>

根据您的问题,您应该使用以下方式。 如果您投影如下所示的路径

然后下面是处理下载文件的正确方法。

<a target="_self" href="../../assets/File.pdf" download="File.pdf">here</a>

确保您的 href 路径正确无误。此外,资产文件夹应该在角度app文件夹之外,否则它将无法工作。

Angular Reference

我希望这会对你有所帮助。如果您有任何问题或建议,请告诉我。

答案 1 :(得分:0)

这对我有用:

<a  href="../../assets/file.txt" download="file.txt">here</a>

文件 file.txt 必须位于资产文件夹内。