Descărcați un fișier de pe server și dați numele fișierului în angularjs (Programare, Javascript, Angularjs, Zip)

Ali a intrebat.

Încerc să descarc un fișier zip de pe serverul meu (controler spring mvc). iată codul meu în angularjs (1.5) controller pentru a descărca fișierul zip.

   $http({
            url: '/myurl',
            method: 'GET',
            headers: {
                'Content-type': 'application/zip'
            },
            responseType: 'arraybuffer'
        }).success(function (data,status,headers) {
            var blob = new Blob([data], {type: "application/zip"});
            var objectUrl = URL.createObjectURL(blob);                
            var file = headers('Content-Disposition');               

            window.open(objectUrl);

        });

Codul de mai sus funcționează, dar trebuie să dau numele fișierului pe care îl primesc în antetul de răspuns. Am obținut numele fișierului din header(‘Content-Disposition’) cum să folosesc acest nume de fișier pentru fișierul descărcat? în prezent, acesta oferă orice nume de fișier aleatoriu.

Am încercat codul de mai jos, care funcționează în Chrome, dar nu funcționează în Mozilla… există vreo altă soluție care să funcționeze în toate browserele?

            //var anchor = document.createElement("a");
            //anchor.download = "ATMOSLogFiles.zip";
            //anchor.href = objectUrl;
            //anchor.click();

Mulțumesc pentru ajutor!

Comentarii

  • încercați să căutați „spring attachment” –  > Por blackmiaool.
  • De ce folosiți Ajax pentru acest lucru în primul rând? –  > Por Quentin.
  • De ce setați un antet de cerere de 'Content-type': 'application/zip'? Este o cerere GET. Nu există niciun corp în cerere care să descrie tipul de conținut de. –  > Por Quentin.
  • Aveți vreun feedback sau sugestii? –  > Por lin.
  • Economizor de fișiere angulare este un polyfill bun. –  > Por georgeawg.
2 răspunsuri
lin

O soluție bazată pe blob:

Ați putea folosi angular-file-saver pentru a realiza acest lucru.

var app = angular.module('myApp', ['ngFileSaver'])

app.controller('ExampleCtrl', ['FileSaver', 'Blob', function () {
    $scope.download = function () {
        var myData = new Blob([text], { type: 'text/plain;charset=utf-8' });
        FileSaver.saveAs(myData, 'text.txt');
    }
}]);

O altă soluție bazată pe HTML5:

O modalitate simplă prin utilizarea HTML5 atributul download / documentația MDN. Nu este nevoie de blobs. Acest atribut este acceptat de orice browser & versiune de browser care acceptă AngularJS (cu excepția IE10/IE11 – IE Edge îl acceptă).

<a href="<downloadLink>" download="fileName">Download</a>

Frederick Eze

Răspunsul de mai sus al lui @lin este corect, dar vreau să adaug că, așa cum cere întrebarea, se poate trece direct numele de fișier setat pe server pentru a fi numele de fișier al fișierului pe partea clientului, după cum urmează:

Trebuie doar să instalați fișierul angular-file-saver, , faceți referire la el în aplicația dvs. și injectați-l ca dependență.

    var app = angular.module('myApp', ['ngFileSaver']);
    app.controller('mainCtrl', ['FileSaver', 'Blob', '$http', '$scope', function(FileSaver, Blob, $http, $scope) {
              // make ajax call to server
      $scope.download = function() {
           var req = {
               url: 'your server url',
               method: 'GET',
               responseType: 'arraybuffer'
           };
         $http(req).then(function(resp){
                var serverData = new Blob([resp.data], {type: resp.headers()['content-type']});
                FileSaver.saveAs(serverData, resp.headers()['content-disposition']); // File name set at server passed to the FileSaver function
         });
      }
}]);