单击 href link 时下载文件？

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

结果中包含文件的 link，例如它会是 https://<insertURL>，因为 RESTCaller 在调用 exportSynceFileReq 后解包我的 promise API 定义。问题是，当我执行 ng-click 时，没有任何反应。文件未下载。如果我这样做

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

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

Answer 1

如果你有来自服务器的 link，你可以尝试使用虚拟 link 并点击它：

$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 对象，最后调用 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 对象的更多信息 here。

您可以在此 jsFiddle.

中查看其他一些与 Blob 相关的示例

单击 href link 时下载文件？

Download a file while clicking on href link?

javascript

html

angularjs

download

angularjs-ng-click