使用AngularJS下载文件 [英] Download a file with AngularJS
问题描述
我需要提供下载文件的链接，任何用户都必须隐藏该链接并且可以访问该链接，这是我的代码，没有任何错误，但是我什至无法打开下载对话框:
I need to provide a link to download a file, the link must be hidden and accessible by any users, Here is my code , there are no errors whatsoever, but I can't even get the download dialog box to open:
模板
<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
}
推荐答案
首先，您不能隐藏/不公开"基于Web的技术(HTML/CSS/JavaScript)应用程序中的链接.下载是由客户端处理的，因此Download/Link-URL必须是公开的.您可以尝试隐藏"保护性参数，例如使用后端执行的编程语言(例如"PHP或node.js等")在下载URL中提供ID.这样，您可以创建hash URL(例如http://www.myside.com/download/359FTBW!S3T387IHS)来隐藏URL中的参数，例如recordId.
First of all, your can't "hide/not public" a link in a web based technology (HTML/CSS/JavaScript) application. Downloads are handled by the client, so the Download/Link-URL must be public. You can try to "hide" protective params like e.g. IDs in the download URL by using a backend executed programming language like "PHP or node.js, etc.". In that way you can create hash URLs like http://www.myside.com/download/359FTBW!S3T387IHS to hide parameters like the recordId in your URL.
通过了解这一点，您的解决方案非常容易.只需使用<a href="http://mydownloadurl" download>link text</a>之类的 HTML属性下载来强制浏览器下载href来源.此处不需要ng-click.不幸的是Safari浏览器不支持download属性.当浏览器正在处理下载本身时，这并不重要.根据用户系统OS的配置，文件将被下载或直接在该系统上安装的程序中打开.例如，如果某些pdf查看器应用程序可用，则会在PDF查看器中打开PDF文件.
By knowing this, your solution is pretty easy. Just use the HTML attribute download like <a href="http://mydownloadurl" download>link text</a> to force the browser to download the href source. No ng-click is needed here. Unfortunately the download attribute is not supported by Safari browser. This doesn't realy matter while the browser is handling the download itself. Depending on the users system OS configuration the file will be downloaded or directly opened in a programm installed on that system. For example, a PDF file will be opened in a PDF Viewer if some pdf viewer application is available.
我写了一个柱塞，它在AngularJS控制器
I wrote a Plunker which handles ng-href in a AngularJS controller $scope. I hope this is what you need.
您的控制器:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.fileHref = 'http://www.analysis.im/uploads/seminar/pdf-sample.pdf';
});
您的视图:
Your view:
<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>
这篇关于使用AngularJS下载文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
