URL-адрес блоба в Internet Explorer с angularjs

Question

Учитывая этот код (от кого-то еще):

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. Нет ошибки, нет предупреждения, нет ответа вообще.

Но в соответствии с этим он поддерживается в IE10 и 11.

Есть какие-то настройки безопасности IE, которые нужно изменить или что происходит?

Answer 1

Нашел решение для этого. Во-первых, IE по-разному обрабатывает сохранение BLOB-объектов, в частности:

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

Если вы посмотрите на исходный код этой страницы, вы увидите, как они это делают.

Но заставить его работать с кросс-браузерной поддержкой - это боль... и в конце концов вы получите FileSaver.js.

... то, что я в конечном итоге использовал, и работает как шарм.

Answer 2

Используйте FileSaver.js! Так легко в использовании.

Для 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);

Работает как шарм, кросс-браузер.

Спасибо @Nicros за указание файла filesaver.js в своем ответе. Я сделал этот ответ, чтобы пользователи могли быстро скопировать и вставить пример, не желая использовать код, специфичный для MS. (Кросс-браузерная порода)