web-dev-qa-db-ja.com

Angularjsを使用したInternetExplorerのBLOBURL

このコードを（他の誰かから）与えられた：

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

module.controller('MyCtrl', function ($scope){
    $scope.json = JSON.stringify({a:1, b:2});
});

module.directive('myDownload', function ($compile) {
    return {
        restrict:'E',
        scope:{ data: '=' },
        link:function (scope, Elm, attrs) {
            function getUrl(){
                return URL.createObjectURL(new Blob([JSON.stringify(scope.data)], {type: "application/json"}));
            }

            Elm.append($compile(
                    '<a class="btn" download="backup.json"' +
                    'href="' + getUrl() + '">' +
                    'Download' +
                    '</a>'
            )(scope));                    

            scope.$watch(scope.data, function(){
                Elm.children()[0].href = getUrl();
            });
        }
    };
});

フィドルの例 Chromeでダウンロードすると問題なく動作します。ただし、「ダウンロード」リンクをクリックしても、IE11では何も起こりません。エラーも警告も応答もまったくありません。

しかし this によると、IE10と11でサポートされています。

変更が必要なIEセキュリティ設定はありますか？それとも何が起こっているのですか？

javascripthtmlinternet-explorerangularjsbloburls
12
Nicros

これに対する解決策を見つけました。まず、IEはblobの保存を異なる方法で処理します。具体的には、以下を使用します。

window.navigator.msSaveOrOpenBlob(new Blob([element], {type:"text/plain"}), "filename.txt");`

このページ のソースコードを見ると、それらがどのように機能するかがわかります。

しかし、これをクロスブラウザサポートで機能させるのは苦痛です..そして一日の終わりには FileSaver.jsで になります。

..これは私が最終的に使用したものであり、魅力のように機能します。

17
Nicros

FileSaver.js を使用してください！とても使いやすいです。

For PDFバイナリ応答として送信：

// In HTML, first include filesaver.js with <script src="/scripts/filesaver.js"></script>

var thisPDFfileName = 'my.pdf';
var fileData = new Blob([response], { type: 'application/pdf' });

// Cross-browser using FileSaver.js
saveAs(fileData, thisPDFfileName);

NPMバージョンの場合：

var fileSaver = require('file-saver');

var thisPDFfileName = 'my.pdf';
var fileData = new Blob([response], { type: 'application/pdf' });

// Cross-browser using FileSaver.js
fileSaver.saveAs(fileData, thisPDFfileName);

チャーム、クロスブラウザのように機能します。

彼の答えでfilesaver.jsを指摘してくれた@Nicrosに感謝します。 MS固有のコードを使用したくないユーザーがその例をすばやくコピーして貼り付けることができるように、この回答を作成しました。 （クロスブラウザロック）

1
TetraDev