it-swarm.com.de

laden Sie die csv-Datei von der Web-API in eckigen Js herunter

mein API-Controller gibt eine CSV-Datei zurück, wie unten gezeigt:

    [HttpPost]
    public HttpResponseMessage GenerateCSV(FieldParameters fieldParams)
    {
        var output = new byte[] { };
        if (fieldParams!= null)
        {
            using (var stream = new MemoryStream())
            {
                this.SerializeSetting(fieldParams, stream);
                stream.Flush();
                output = stream.ToArray();
            }
        }
        var result = new HttpResponseMessage(HttpStatusCode.OK) { Content = new ByteArrayContent(output) };
        result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
        result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
        {
            FileName = "File.csv"
        };
        return result;
    }

und meine anglejs, die die csv-Datei senden und empfangen, wird unten angezeigt:

$scope.save = function () {
            var csvInput= extractDetails();

            // File is an angular resource. We call its save method here which
            // accesses the api above which should return the content of csv
            File.save(csvInput, function (content) {
                var dataUrl = 'data:text/csv;utf-8,' + encodeURI(content);
                var hiddenElement = document.createElement('a');
                hiddenElement.setAttribute('href', dataUrl);
                hiddenElement.click();
            });
        };

In Chrome lädt es eine Datei herunter, die document heißt, aber keine Dateityperweiterung ..__ hat. Der Inhalt der Datei ist [Object object].

In IE10 wird nichts heruntergeladen.

Was kann ich dagegen tun? 

UPDATE: Dies könnte für Sie mit dem gleichen Problem funktionieren: link

48
raberana

Probieren Sie es wie folgt aus:

File.save(csvInput, function (content) {
    var hiddenElement = document.createElement('a');

    hiddenElement.href = 'data:attachment/csv,' + encodeURI(content);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'myFile.csv';
    hiddenElement.click();
});

basierend auf der besten Antwort in diese Frage

62
adeneo

Ich habe die untenstehende Lösung verwendet und es hat für mich funktioniert.

 if (window.navigator.msSaveOrOpenBlob) {
   var blob = new Blob([decodeURIComponent(encodeURI(result.data))], {
     type: "text/csv;charset=utf-8;"
   });
   navigator.msSaveBlob(blob, 'filename.csv');
 } else {
   var a = document.createElement('a');
   a.href = 'data:attachment/csv;charset=utf-8,' + encodeURI(result.data);
   a.target = '_blank';
   a.download = 'filename.csv';
   document.body.appendChild(a);
   a.click();
 }

9
Manu Sharma

Keiner von denen hat in Chrome 42 für mich gearbeitet ...

Stattdessen verwendet meine Direktive jetzt diese link-Funktion (base64 hat es funktioniert):

  link: function(scope, element, attrs) {
    var downloadFile = function downloadFile() {
      var filename = scope.getFilename();
      var link = angular.element('<a/>');
      link.attr({
        href: 'data:attachment/csv;base64,' + encodeURI($window.btoa(scope.csv)),
        target: '_blank',
        download: filename
      })[0].click();
      $timeout(function(){
        link.remove();
      }, 50);
    };

    element.bind('click', function(e) {
      scope.buildCSV().then(function(csv) {
        downloadFile();
      });
      scope.$apply();
    });
  }
4
malix

Die letzte Antwort funktionierte für ein paar Monate für mich, dann wurde der Dateiname nicht mehr erkannt. 

@ Scotts Antwort hier arbeitet für mich:

Herunterladen einer Datei von einer ASP.NET-Web-API-Methode mithilfe von AngularJS

4
prsnca

Das musste ich kürzlich umsetzen. Gedanken zu teilen, was ich herausgefunden hatte;

Damit es in Safari funktioniert, musste ich target: '_self' setzen. Sorgen Sie sich nicht um den Dateinamen in Safari. Sieht aus, als würde es nicht wie hier erwähnt unterstützt. https://github.com/konklone/json/issues/56 ( http://caniuse.com/#search=download )

Der folgende Code funktioniert in Mozilla, Chrome & Safari gut.

  var anchor = angular.element('<a/>');
  anchor.css({display: 'none'});
  angular.element(document.body).append(anchor);
  anchor.attr({
    href: 'data:attachment/csv;charset=utf-8,' + encodeURIComponent(data),
    target: '_self',
    download: 'data.csv'
  })[0].click();
  anchor.remove();
2
Ricky Boy

Verwenden Sie in Angular 1.5 den Dienst $window, um eine Datei herunterzuladen.

angular.module('app.csv').factory('csvService', csvService);

csvService.$inject = ['$window'];

function csvService($window) {
    function downloadCSV(urlToCSV) {
        $window.location = urlToCSV;
    }
}
1
user2601995

Anstatt Ajax/XMLHttpRequest/$ http zum Aufrufen der WebApi-Methode zu verwenden, verwenden Sie ein HTML-Formular. Auf diese Weise speichert der Browser die Datei mit den Informationen zu Dateinamen und Inhaltstyp in den Antwortheadern. Sie müssen die Einschränkungen von Javascript für die Dateibearbeitung nicht umgehen. Sie können auch eine GET-Methode anstelle von POST verwenden, da die Methode Daten zurückgibt. Hier ist ein Beispielformular:

<form name="export" action="/MyController/Export" method="get" novalidate>
    <input name="id" type="id" ng-model="id" placeholder="ID" />
    <input name="fileName" type="text" ng-model="filename" placeholder="file name" required />
    <span class="error" ng-show="export.fileName.$error.required">Filename is required!</span>
    <button type="submit" ng-disabled="export.$invalid">Export</button>
</form>
1
Paul Taylor

Ich denke, der beste Weg, um eine durch den Aufruf von REST generierte Datei herunterzuladen, ist die Verwendung von window.location Beispiel: 

    $http({
        url: url,
        method: 'GET'
    })
    .then(function scb(response) {
        var dataResponse = response.data;
        //if response.data for example is : localhost/export/data.csv
        
        //the following will download the file without changing the current page location
        window.location = 'http://'+ response.data
    }, function(response) {
      showWarningNotification($filter('translate')("global.errorGetDataServer"));
    });

0
Fadi Nouh

Der a.download wird vom IE nicht unterstützt. Zumindest auf den HTML5 "unterstützten" Seiten. :(

0
Nick Jacobs