web-dev-qa-db-fra.com

URL de blob dans Internet Explorer avec angularjs

Étant donné ce code (de quelqu'un d'autre):

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();
            });
        }
    };
});

L'exemple du violon fonctionne bien pour télécharger en chrome. Mais cliquer sur le lien "télécharger" ne fait rien dans IE11. Pas d'erreur, pas d'avertissement, pas de réponse du tout.

Mais selon this il est supporté par IE10 et 11.

Existe-t-il des paramètres de sécurité IE qui doivent être modifiés ou ce qui se passe?

javascripthtml5internet-explorerangularjsbloburls
11
Nicros

Trouvé une solution pour cela. Tout d’abord, IE gère l’enregistrement de blob différemment, en particulier il utilise:

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

Si vous regardez le code source pour cette page , vous verrez comment ils le font.

Mais pour que cela fonctionne avec la prise en charge inter-navigateurs est une tâche difficile .. et à la fin de la journée, vous vous retrouverez avec avec FileSaver.js .

..qui est ce que j'ai fini par utiliser, et fonctionne comme un charme.

16
Nicros

Utilisez FileSaver.js ! Tellement facile à utiliser.

Pour PDF envoyé sous forme de réponse binaire: 

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

Pour la version 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);

Fonctionne comme un charme, multi-navigateur.

Merci à @Nicros pour avoir pointé filesaver.js dans sa réponse. J'ai fait cette réponse pour que les utilisateurs puissent rapidement copier et coller un exemple, qui ne veulent pas utiliser de code MS spécifique. (Roches multi-navigateurs)

0
TetraDev