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?

Penton

IE does not support all blob mime-types, did you try making it just plain text and see if that works? – Frontal

I have the same problem, and I've tried it with text/plain, to no avail. Interestingly, I can right-click, save target as, and that works. – Miniaturize

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.

Penton

I can conform this works. I have the following if condition for IE / ROW: // IE 10 / 11 if (window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(blob, fileName); } else { ... – Shipe

Nice find. I was about to drive myself crazy looking at browser comparison charts. – Titbit

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)

Contradictory