Question

当我使用ng-click点击文件时，有什么办法可以下载文件吗？这就是我现在所拥有的：

<a ng-href="../api/rest/admin/v1/syncsessions/export?fileKey={{syncObject.sourceFiles}}">Download file</a>

这似乎工作正常。但问题是，当我点击href时，我会被重定向到一个带有网址的网页。因此，我想做这样的事情：

<a ng-click="getExportFiles({{syncObject.sourceFiles}})">Download File</a>

其中getExportFiles定义如下：

var baseSyncUrl = "../api/rest/admin/{{path.version}}/syncsessions";
var exportSyncFileReq = {method: "GET", url: baseSyncUrl + "/export", params: {fileKey: ""}, path: {version: "v1"}};

$scope.getExportFiles = function(fileKey) {
    var req = exportSyncFileReq;
    req.params.fileKey = fileKey;
    var data = RESTCaller.getConfig(req);
    data.then(function(result) {
        if(result) {
            return result;
        }
    })
}

结果中包含指向文件的链接，例如https://<insertURL>，因为RESTCaller在调用定义的promise API后展开exportSynceFileReq。问题是，当我做ng-click时，没有任何反应。该文件未下载。如果我做

<a ng-href="{{getExportFiles(syncObject.sourceFiles)}}">Download File</a>

我得到一个无限的摘要循环。有没有办法我只需点击一个链接，调用我的API，然后自动下载文件而不重定向到另一个页面？任何帮助，将不胜感激。谢谢！

Answer 1

如果您有来自服务器的链接，您可以尝试使用虚拟链接并单击它：

$scope.getExportFiles = function(fileKey) {
    var req = exportSyncFileReq;
    req.params.fileKey = fileKey;
    var data = RESTCaller.getConfig(req);
    data.then(function(result) {
        if (result) {
            var link = document.createElement('a');
            //link.download = 'filename.ext';
            link.href = result;
            link.click();
        }
    })
}

Answer 2

我之前需要使用AngularJS完成此操作，然后使用angular-file-saver库。

下面的代码使用您的初始RESTCaller.getConfig(...)函数，但随后使用$http提供程序获取文件内容，从返回的缓冲区中创建Blob对象，最后调用{{1} } angular-file-saver函数执行浏览器下载。

saveAs

您可以在Blob对象here找到更多信息。

您可以在此jsFiddle中看到其他一些与Blob相关的示例。

点击href链接下载文件？

2 个答案: