it-swarm.com.de

Blob-URL im Internet Explorer mit Angularjs

Gegeben diesen Code (von jemand anderem):

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

Die Geige Beispiel funktioniert gut in Chrom herunterzuladen. Wenn Sie jedoch auf den Link "Herunterladen" klicken, wird in IE11 nichts ausgeführt. Kein Fehler, keine Warnung, überhaupt keine Antwort.

Aber laut this wird es in IE10 und 11 unterstützt.

Gibt es eine IE Sicherheitseinstellung, die geändert werden muss, oder was ist los?

11
Nicros

Habe eine Lösung dafür gefunden. Zunächst behandelt IE das Speichern von Blobs anders, insbesondere mit:

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

Wenn Sie sich den Quellcode für diese Seite ansehen, werden Sie sehen, wie sie es tun.

Aber dies mit Cross-Browser-Unterstützung zum Laufen zu bringen, ist eine Qual. Und am Ende des Tages werden Sie mit FileSaver.js enden.

..was ist, was ich am Ende mit, und arbeitet wie ein Zauber.

16
Nicros

Verwenden Sie FileSaver.js ! So einfach zu bedienen.

Für PDF als binäre Antwort gesendet:

// 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);

Für NPM-Version:

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

Funktioniert wie ein Charme, browserübergreifend.

Vielen Dank an @Nicros für den Hinweis auf filesaver.js in seiner Antwort. Ich habe diese Antwort gemacht, damit Benutzer, die keinen MS-spezifischen Code verwenden möchten, schnell ein Beispiel daraus kopieren und einfügen können. (Cross-Browser-Felsen)

0
TetraDev