pobierz plik csv z web api w angular js

Użyłem poniższego rozwiązania i zadziałało na mnie.

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

Żadne z nich nie działało u mnie w Chrome 42...

Zamiast tego moja dyrektywa używa teraz funkcji link (base64 sprawiła, że działa):

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

Ostatnia odpowiedź działała u mnie przez kilka miesięcy, po czym przestała rozpoznawać nazwę pliku, jak skomentował adeneo ...

@Scott ' s answer here is working for me:

Pobierz Plik z ASP.NET metoda Web API przy użyciu AngularJS

Ostatnio musiałem to wdrożyć. Pomyślałem, że podzielę się tym, co wymyśliłem;

Aby to działało w Safari, musiałem ustawić target: '_self',. Nie martw się o nazwę pliku w Safari. Wygląda na to, że nie jest obsługiwany, jak wspomniano tutaj; https://github.com/konklone/json/issues/56 (http://caniuse.com/#search=download )

Poniższy kod działa dobrze dla mnie w Mozilli, Chrome & Safari;

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

A. download nie jest obsługiwany przez IE. Przynajmniej na stronach HTML5 "obsługiwane". :(

Zamiast używać Ajax / XMLHttpRequest / $http do wywoływania metody WebApi, użyj formularza html. W ten sposób przeglądarka zapisuje plik, używając nazwy pliku i informacji o typie zawartości w nagłówkach odpowiedzi, a ty nie musisz obejść ograniczeń javascript dotyczących obsługi plików. Możesz również użyć metody GET zamiast postu, ponieważ metoda zwraca dane. Oto przykładowa forma:

<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>

W Angular 1.5 Użyj usługi $window, Aby pobrać plik.

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

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

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

Myślę, że najlepszym sposobem na pobranie dowolnego pliku wygenerowanego przez wywołanie REST jest użycie window.położenie przykład:

    $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"));
    });