使用AngularJS下载文件

Question

使用AngularJS下载文件

我需要提供一个下载文件的链接,链接必须被任何用户隐藏和访问,这是我的代码,没有任何错误,但我甚至无法打开下载对话框:

模板

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

Run Code Online (Sandbox Code Playgroud)

脚本文件

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sag*_*sai 12

我必须实现这个功能.还必须确保它适用于所有主要支持的浏览器.这是同样的解决方案!

快乐的编码!!!

您的视图/ HTML

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

Run Code Online (Sandbox Code Playgroud)

你的控制器

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

            })
};

Run Code Online (Sandbox Code Playgroud)

Answer 2

lin*_*lin 6

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

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

我写了一个处理AngularJS 控制器的Plunker。我希望这是你所需要的。ng-href$scope

您的控制器：

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

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

Run Code Online (Sandbox Code Playgroud)

您的观点：

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，11 月前
查看次数：	40299 次
最近记录：	8 年，9 月前