98

非表示のテキストエリアにテキストがあります。ボタンをクリックすると、テキストをファイルとしてダウンロードできるようにしたいと考えてい.txtます。これはAngularJSまたはJavascriptを使用して可能ですか?

4

11 に答える 11

33

ボタンをクリックするだけで、次のコードを使用してダウンロードできます。

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

于 2015-02-16T12:12:46.330 に答える
26

これを試して

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

このサイトにアクセスすると、役に立つかもしれません:)

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

于 2014-03-08T12:19:32.053 に答える
14

現在作業中のプロジェクトでは、目に見えない iFrame があり、ダウンロード ダイアログ ボックスを表示するには、ファイルの URL を iFrame にフィードする必要がありました。ボタンをクリックすると、コントローラーは動的 URL を生成し、directive私が書いたカスタムがリストされている $scope イベントをトリガーします。ディレクティブは、まだ存在しない場合は本文に 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);
于 2013-05-13T04:55:58.497 に答える
12

ユーザーにダウンロードさせたいデータを含むlocation.hrefデータURIに設定できます。これ以外に、JavaScript だけでそれを行う方法はないと思います。

于 2013-05-13T03:57:15.073 に答える
7

unsafe:blob:null が原因でファイルがダウンロードされない場合に備えて、それを追加したいだけです...ダウンロードボタンにカーソルを合わせると、サニタイズする必要があります。例えば、

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

app.config(関数($compileProvider){

$compileProvider.aHrefSanitizationWhitelist(/^\s*(|blob|):/);
于 2014-02-09T23:17:13.243 に答える
5

サーバーにアクセスできる場合は、このより一般的な質問の回答に従ってヘッダーを設定することを検討してください。

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

その回答に関するコメントを読むと、octet-stream よりも具体的な Content-Type を使用することをお勧めします。

于 2016-08-05T15:45:07.243 に答える
2

静的 URL は必要ありませんでした。すべての ajax 操作を行うための AjaxFactory があります。工場から URL を取得し、次のようにバインドしています。

<a target="_self" href="{{ file.downloadUrl + '/' + order.OrderId + '/' + fileName }}" download="{{fileName}}">{{fileName}}</a>

ありがとう @AhlemMustapha

于 2014-06-16T20:38:28.257 に答える