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

Posted 2023-03-05

【中文标题】下载文件链接在 Angular 中不起作用

【英文标题】：Download file link not working in Angular

【发布时间】：2018-09-13 19:20:33

【问题描述】：

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

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

在我的landing-page.component.html 中，它位于landing-page 文件夹中，我写了以下行来允许下载文件。

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

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

【问题讨论】：

你应该添加完整的路径。

将您的文件移动到assets文件夹。然后从该目录中将其引用为 /assets/filename.pdf

【参考方案1】：

这对我有用：

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

文件 file.txt 必须在 assets 文件夹中。

【参考方案2】：

试试这个，像下面这样的情况，浏览器会执行一个完整的页面重新加载到原始链接。

包含目标元素的链接：

<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 路径正确。此外，资产文件夹应该在 angular app 文件夹之外，否则它将无法工作。

Angular Reference

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

【讨论】：

谢谢。那行得通。但是，我不必输入 ../../assets/File.pdf。只是做 assets/File.pdf 工作

是的，但它会根据您拥有的文件夹结构而有所不同。反正很酷:)