Blob URL w przeglądarce Internet Explorer z angularjs

Question

Given ten kod (od kogoś innego):

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 działa poprawnie pobrać w chromie. Ale kliknięcie linku "pobierz" nic nie robi w IE11. Brak błędu, brak ostrzeżenia, brak odpowiedzi.

Ale według this jest obsługiwany w IE10 i 11.

Czy istnieje jakiś ustawienie zabezpieczeń IE, który musi zostać zmieniona lub co się dzieje?

Answer 1

Znaleziono rozwiązanie tego problemu. Po pierwsze, IE obsługuje oszczędność blob inaczej, specjalnie używa:

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

Jeśli spojrzeć na kodzie źródłowym this page, widać, jak oni to robią.

Ale aby to zadziałało, obsługa wielu przeglądarek jest uciążliwa ... a pod koniec dnia skończy się with FileSaver.js.

.. którego użyłem i działa jak czar.

Answer 2

Użyj FileSaver.js! Tak łatwy w użyciu.

dla PDF wysłany jako odpowiedź binarnym:

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

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

działa jak czar, cross-browser.

Dzięki @Nicros za wskazanie pliku filesaver.js w jego odpowiedzi. Zrobiłem tę odpowiedź, aby użytkownicy mogli szybko skopiować i wkleić przykład tego, kto nie chce używać specyficznego kodu MS. (Skały w różnych przeglądarkach)