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

Question

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

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

在位于着陆页文件夹中的我的着陆页.component.html中，我写了以下几行以允许下载文件。

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

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

Answer 1

尝试此操作，例如以下情况，浏览器将执行整页重新加载到原始链接。

• 包含目标元素的链接：

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

• 绝对链接：

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

• 以'/'开头的链接在定义base时导致不同的基本路径：

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

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

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

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

确保您的href路径正确。此外，assets文件夹应位于angular app文件夹之外，否则它将不起作用。

角度参考

我希望这能帮到您。如果您有任何问题或建议，请告诉我。