Blob-URL im Internet Explorer mit AngularJS

Question

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

The fiddle example funktioniert gut in Chrom zum Download bereit. Durch Klicken auf den Link "Download" wird in IE11 jedoch nichts unternommen. Kein Fehler, keine Warnung, keine Antwort.

Aber nach this ist es in IE10 unterstützt und 11.

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

Answer 1

Eine Lösung dafür gefunden. Zuerst behandelt IE blob Spar anders, und zwar verwendet er:

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

Wenn Sie this page auf den Quellcode schauen, sehen Sie, wie sie es tun.

Aber um dies mit Cross-Browser-Unterstützung zu arbeiten ist ein Schmerz .. und am Ende des Tages werden Sie am Ende with FileSaver.js.

..das ist, was ich am Ende verwendet habe, und funktioniert wie ein Charme.

Answer 2

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

Arbeiten wie ein Charme, Cross-Browser.

Dank @Nicros für das Zeigen von Dateiserver.js in seiner Antwort. Ich habe diese Antwort gemacht, damit Benutzer schnell ein Beispiel kopieren und einfügen können, die nicht MS-spezifischen Code verwenden möchten. (Cross-Browser-Felsen)