AngularJS 阻止 HTML5 下载链接开始下载答案

【问题标题】：AngularJS prevents HTML5 download link from starting a downloadAngularJS 阻止 HTML5 下载链接开始下载
【发布时间】：2017-11-15 14:33:17
【问题描述】：

我想创建一个点击开始下载文件的超链接（通常显示在浏览器的左下角）。

我使用禁用重写的 HTML5 模式：

angular.module('mymodule', []).config(['$locationProvider', function($locationProvider) {
        $locationProvider.html5Mode({enabled: true, rewriteLinks: false});
}

这是我的 HTML5 下载属性链接：

<ul class="dropdown-menu" id="download-formats">
    <li><a href="/api/v1/rna/{{ rna.upi }}.fasta" download="{{ rna.upi }}.fasta">FASTA</a></li>
</ul>

不知何故，单击此链接根本没有任何效果（我使用的是最新的 Chrome）。应该是这样吗？

回答：所以问题是这个带有下载链接的标记包含在另一个元素中，如果没有填充 href 属性（就像 href 一样，使用angularjs 插值内容）。如果没有填充，它会调用preventDefault()，所以我无法运行 html5 下载操作。我必须在 javascript 中执行命令式下载。

【问题讨论】：

标签： angularjs html

【解决方案1】：

使用ng-href 代替href

<li><a ng-href="/api/v1/rna/{{ rna.upi }}.fasta" download="{{ rna.upi }}.fasta">FASTA</a></li>

【讨论】：

我做到了。 =) 没有任何区别。
在浏览器控制台中检查href url是否绑定
是的，它正确解析为/api/v1/rna/URS00000F78F0.fasta。如果我打开 localhost:8000/api/v1/rna/URS00000F78F0.fasta，它会显示文件。
也许您还需要将域添加到 url
很有趣，即使我在网址前加上http://localhost:8000，它仍然不会开始下载，尽管这是一个完整的下载路径！我将其复制粘贴到另一个选项卡，此链接包含该文件。尝试使用href 和ng-href。