Javascript 单击href链接时下载文件？

当我使用

ng click

单击文件时，是否有任何方法可以下载文件？以下是我现在拥有的：

<a ng-href="../api/rest/admin/v1/syncsessions/export?fileKey={{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://

，因为

RESTCaller

在调用定义的

exportSynceFileReq

API后打开我的

promise

。问题是，当我点击时，什么都没有发生。该文件未下载。如果我这样做

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

---

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

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

$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();
        }
    })
}

---

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

$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();
        }
    })
}

---

我以前需要用AngularJS做这件事，我求助于使用库

下面的代码使用初始的

RESTCaller.getConfig（…）

函数，然后使用

$http

提供程序获取文件内容，从返回的缓冲区中创建一个Blob对象，最后调用

angular file saver

的

saveAs

函数执行浏览器下载

$scope.getExportFiles = function(fileKey) {

  // Build the URL we're wanting to fetch
  RESTCaller.getConfig({
    method: "GET",
    url: baseSyncUrl + "/export",
    params: {
      fileKey: fileKey.toString()
    },
    path: { version: "v1" }
  }).then(function(result) {

    // Assuming result is the URL of the download file.
    var fetchUrl = result.toString();

    // Check if the current browser has support for Blob objects
    try { var blobSupport = !!new Blob; } catch (e) {}

    // If there is Blob support, use the angular-file-saver library
    // to download the file
    if (blobSupport) {

      $http
        .get(fetchUrl, {}, { responseType: 'arraybuffer' })
        .then(function(response) {
          saveAs(new Blob([ response.data ], {
            // You need to specify the file format for the browser
            // to handle the download correctly. Whether this is hard-coded
            // or dynamically returned by your API is up to you.
            type: 'application/octet-stream'
          }), fileKey);
        });

    } else {

      // Use some other method a retrieving the file, whether
      // that be creating an 'A' element in the DOM and triggering
      // the 'click' event, or using $window
      $window.open(fetchUrl);

    }

  });
 };

您可以找到有关Blob对象的详细信息

---

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

我以前需要使用AngularJS来实现这一点，我求助于使用库

下面的代码使用初始的

RESTCaller.getConfig（…）

函数，然后使用

$http

提供程序获取文件内容，从返回的缓冲区中创建一个Blob对象，最后调用

angular file saver

的

saveAs

函数执行浏览器下载

$scope.getExportFiles = function(fileKey) {

  // Build the URL we're wanting to fetch
  RESTCaller.getConfig({
    method: "GET",
    url: baseSyncUrl + "/export",
    params: {
      fileKey: fileKey.toString()
    },
    path: { version: "v1" }
  }).then(function(result) {

    // Assuming result is the URL of the download file.
    var fetchUrl = result.toString();

    // Check if the current browser has support for Blob objects
    try { var blobSupport = !!new Blob; } catch (e) {}

    // If there is Blob support, use the angular-file-saver library
    // to download the file
    if (blobSupport) {

      $http
        .get(fetchUrl, {}, { responseType: 'arraybuffer' })
        .then(function(response) {
          saveAs(new Blob([ response.data ], {
            // You need to specify the file format for the browser
            // to handle the download correctly. Whether this is hard-coded
            // or dynamically returned by your API is up to you.
            type: 'application/octet-stream'
          }), fileKey);
        });

    } else {

      // Use some other method a retrieving the file, whether
      // that be creating an 'A' element in the DOM and triggering
      // the 'click' event, or using $window
      $window.open(fetchUrl);

    }

  });
 };

您可以找到有关Blob对象的详细信息

---

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

这几乎可以正常工作！当我输入

link.download=result

时，我得到一个下载文件的错误，但不幸的是，它显示“失败-无文件”，这是什么原因导致的？编辑：实际修复了它。谢谢这在Chrome中适用，但在IE中不适用。也没有错误。你知道为什么它在IE中不起作用吗？@BelgoCanadian我认为在IE中你需要添加DOM的链接，所以使用

document.body.appendChild（link）；link.click（）；document.body.removeChild（link）这几乎可以正常工作！当我输入
link.download=result
时，我得到一个下载文件的错误，但不幸的是，它显示“失败-无文件”，这是什么原因导致的？编辑：实际修复了它。谢谢这在Chrome中适用，但在IE中不适用。也没有错误。你知道为什么它在IE中不起作用吗？@BelgoCanadian我认为在IE中你需要添加DOM的链接，所以使用
document.body.appendChild（link）；link.click（）；document.body.removeChild（link）