javascript - Blob url in internet explorer with angularjs - Stack Overflow

admin管理员组

文章数量:1206591

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?

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?

• javascript
• html
• internet-explorer
• angularjs
• bloburls

Share Improve this question Follow edited Dec 12, 2013 at 16:36 Nicros asked Dec 12, 2013 at 2:35 NicrosNicros 5,1831212 gold badges6060 silver badges102102 bronze badges 2

• IE does not support all blob mime-types, did you try making it just plain text and see if that works? – joseeight Commented Dec 12, 2013 at 17:53
• 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. – bhamlin Commented Jan 7, 2014 at 19:34

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 17

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.

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)

本文标签： javascriptBlob url in internet explorer with angularjsStack Overflow