javascript - 单击 href 链接时下载文件？

Question

当我使用 ng-click 单击文件时，有什么方法可以下载文件吗？ ？这是我现在拥有的:

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

这似乎工作正常。然而，问题是，当我点击href时，我被重定向到带有 url 的页面。因此，我想做这样的事情:

<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调用exportSynceFileReq后API 定义。问题是，当我这样做时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();
        }
    })
}

编辑:如果您正在寻找 native HTML 解决方案，您还可以使用 download attribute

<a href="path" download>Download File</a>

下载属性也支持文件名。