使用AngularJS下载文件

Question

使用AngularJS下载文件

9

我需要提供一个下载文件的链接，这个链接必须是隐藏的并且可以被所有用户访问。这是我的代码，没有任何错误，但是我甚至不能打开下载对话框：

模板

 <a ng-href="#" target="page" type="button" class="btn" 
ng-click="download()">Download</a>

脚本文件

$scope.download = function(){
 //here i need to know the code,can anybody explain me
}

- vallepu veerendra kumar

2个回答

8

首先，在基于Web的技术（HTML/CSS/JavaScript）应用程序中，您无法“隐藏/不公开”链接。下载由客户端处理，因此下载/链接URL必须是公开的。您可以尝试通过使用后端执行的编程语言（如“PHP或node.js等”）来“隐藏”保护参数，例如在下载URL中使用ID。通过这种方式，您可以创建像http://www.myside.com/download/359FTBW!S3T387IHS这样的哈希URL，以隐藏URL中的参数，例如recordId。

知道了这一点，您的解决方案非常简单。只需使用HTML属性download，例如<a href="http://mydownloadurl" download>link text</a>，强制浏览器下载href源代码。这里不需要ng-click。不幸的是，Safari浏览器不支持download属性。这并不重要，因为浏览器本身正在处理下载。根据用户系统操作系统的配置，文件将被下载或直接在安装在该系统上的程序中打开。例如，如果某些PDF查看器应用程序可用，则会在PDF查看器中打开PDF文件。

我写了一个Plunker，在AngularJS控制器$scope中处理ng-href。希望这是您需要的。 您的控制器：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.fileHref = 'http://www.analysis.im/uploads/seminar/pdf-sample.pdf';
});

抱歉，我不能直接翻译文本。请提供需要翻译的具体内容。

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <a ng-href="fileHref" download="yourFilename">Download</a>
</body>
</html>

- lin

通过angularJS进行下载不是一个好的方式。但是如果你想通过angularJS设置下载URL -> 可以看一下我的例子。 - lin

抱歉，朋友，我无法在这里投票，至少我需要15点声望才能投赞成票，不管怎样，我很感激你。我会尽力在未来几天内获取声望并投票支持，谢谢。 - vallepu veerendra kumar

我无法通过AngularJS找到下载链接。请提供它。 - Sai M.

@lin：解决方案很好。但是，这个解决方案对于“Authorization: Bearer”令牌或者当内容无法以未经授权的方式下载时不起作用。你能否给出一个解决方案？ - Anijit Sau

@Anijit https://dev59.com/a2Qn5IYBdhLWcg3wvpYV - lin

显示剩余8条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sagar Desai · Accepted Answer

我必须实现这个功能，并确保它在所有主要支持的浏览器中工作。

以下是解决方案！！！

愉快地编码！！！

您的视图/ HTML

<a target="_self" class="ui right floated btn btn-warning" href ng-click="downloadInvoice()"> Download </a>

您的控制器

$scope.downloadInvoice = function () {
    $http.post(url,requestData, {responseType:'arraybuffer',headers:header
        })
            .success(function (response) {
                var file = new Blob([response], {type: 'application/pdf'});

                var isChrome = !!window.chrome && !!window.chrome.webstore;
                var isIE = /*@cc_on!@*/false || !!document.documentMode;
                var isEdge = !isIE && !!window.StyleMedia;


                if (isChrome){
                    var url = window.URL || window.webkitURL;

                    var downloadLink = angular.element('<a></a>');
                    downloadLink.attr('href',url.createObjectURL(file));
                    downloadLink.attr('target','_self');
                    downloadLink.attr('download', 'invoice.pdf');
                    downloadLink[0].click();
                }
                else if(isEdge || isIE){
                    window.navigator.msSaveOrOpenBlob(file,'invoice.pdf');

                }
                else {
                    var fileURL = URL.createObjectURL(file);
                    window.open(fileURL);
                }

            })
};