Blob url in internet explorer with angularjs

Question

Given this code (from someone else):

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 works fine to download in chrome. But clicking the 'download' link does nothing in IE11. No error, no warning, no response at all.

But according to this it's supported in IE10 and 11.

Is there some IE security setting that needs to be changed or what is going on?

Answer 1

Found a solution for this. First, IE handles blob saving differently, specifically it uses:

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

If you look at the source code for this page, you will see how they do it.

But to get this to work with cross browser support is a pain.. and a the end of the day you will end up with FileSaver.js.

..which is what I ended up using, and works like a charm.

Answer 2

Use FileSaver.js! So easy to use.

For PDF sent as binary response:

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

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

Works like a charm, cross-browser.

Thanks to @Nicros for pointing filesaver.js out in his answer. I made this answer so users can quickly copy and paste an example of it, who don't want to use MS specific code. (Cross-browser rocks)