如何使用AngularJS或Javascript提供下载文件？

Question

我在隐藏的textarea中有一些文本.单击按钮时,我希望将文本提供下载为.txt文件.这可能使用AngularJS或Javascript吗？

Answer 1

你可以用这样的东西做Blob.

<a download="content.txt" ng-href="{{ url }}">download</a>

在你的控制器中:

var content = 'file content for example';
var blob = new Blob([ content ], { type : 'text/plain' });
$scope.url = (window.URL || window.webkitURL).createObjectURL( blob );

为了启用URL:

app = angular.module(...);
app.config(['$compileProvider',
    function ($compileProvider) {
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|blob):/);
}]);

请注意

每次调用createObjectURL()时,即使您已经为同一个对象创建了一个对象URL,也会创建一个新的对象URL.必须通过在不再需要URL.revokeObjectURL()时调用其中的每一个来释放它们.浏览器将在卸载文档时自动释放这些内容; 但是,为了获得最佳性能和内存使用情况,如果有明确卸载它们的安全时间,则应该这样做.

资料来源:MDN

Answer 2

只需单击按钮即可使用以下代码下载.

在HTML中

<a class="btn" ng-click="saveJSON()" ng-href="{{ url }}">Export to JSON</a>

在控制器中

$scope.saveJSON = function () {
			$scope.toJSON = '';
			$scope.toJSON = angular.toJson($scope.data);
			var blob = new Blob([$scope.toJSON], { type:"application/json;charset=utf-8;" });			
			var downloadLink = angular.element('<a></a>');
                        downloadLink.attr('href',window.URL.createObjectURL(blob));
                        downloadLink.attr('download', 'fileName.json');
			downloadLink[0].click();
		};

Answer 3

试试这个

<a target="_self" href="mysite.com/uploads/ahlem.pdf" download="foo.pdf">

并访问该网站,它可能对你有所帮助:)

http://docs.angularjs.org/guide/

Answer 4

这可以在javascript中完成,而无需打开另一个浏览器窗口.

window.location.assign('url');

将"url"替换为您文件的链接.ng-click如果需要从按钮触发下载,可以将其置于函数中并调用它.

Answer 5

在我们当前的工作项目中,我们有一个不可见的iFrame,我必须将文件的url提供给iFrame才能获得下载对话框.在按钮单击时,控制器生成动态URL并触发$ scope事件,其中directive列出了我编写的自定义.该指令将iFrame附加到正文(如果它尚不存在)并在其上设置url属性.

编辑:添加指令

appModule.directive('fileDownload', function ($compile) {
    var fd = {
        restrict: 'A',
        link: function (scope, iElement, iAttrs) {

            scope.$on("downloadFile", function (e, url) {
                var iFrame = iElement.find("iframe");
                if (!(iFrame && iFrame.length > 0)) {
                    iFrame = $("<iframe style='position:fixed;display:none;top:-1px;left:-1px;'/>");
                    iElement.append(iFrame);
                }

                iFrame.attr("src", url);


            });
        }
    };

    return fd;
});

该指令响应一个名为的控制器事件 downloadFile

所以在你的控制器中你做

$scope.$broadcast("downloadFile", url);

Answer 6

您可以设置包含要让用户下载的数据location.href的数据URI.除此之外,我认为只用JavaScript就没有办法做到这一点.

Answer 7

只是想添加它以防万一因为不安全而不下载文件:blob:null ...当你将鼠标悬停在下载按钮上时,你必须对其进行清理.例如,

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

的app.config(函数($ compileProvider){

$compileProvider.aHrefSanitizationWhitelist(/^\s*(|blob|):/);

Answer 8

如果您有权访问服务器，请考虑按照这个更一般的问题中的回答设置标头。

Content-Type: application/octet-stream
Content-Disposition: attachment;filename=\"filename.xxx\"

阅读对该答案的评论，建议使用比八位字节流更具体的内容类型。