web-dev-qa-db-ja.com

angular jsのWeb APIからCSVファイルをダウンロードします

私のAPIコントローラーは、次のようにcsvファイルを返します。

    [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;
    }

そして、csvファイルを送受信する私のangularjsを以下に示します：

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

Chromeでは、documentと呼ばれるファイルタイプ拡張子のないファイルをダウンロードします。ファイルの内容は[Object object]です。

IE10では、何もダウンロードされません。

これを修正するにはどうすればよいですか？

更新：これは同じ問題であなたのために働くかもしれません： link

javascriptangularjscsvasp.net-web-apihttpresponse
48
raberana

次のように試してください：

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

この質問 の最も優れた答えに基づいて

62
adeneo

私は以下のソリューションを使用し、それは私のために働いた。

 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

Chrome 42で私のために働いた人はいません...

代わりに、私のディレクティブは次のlink関数を使用するようになりました（base64で機能しました）：

  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

最後の答えは数ヶ月間私のために働いた後、adenooがコメントしたように、ファイル名の認識を停止しました...

ここでの@Scottの答えは私のために働いています：

AngularJSを使用してASP.NET Web APIメソッドからファイルをダウンロードする

4
prsnca

最近これを実装する必要がありました。私が理解したことを共有することを考えました。

Safariで機能させるには、ターゲットを設定する必要がありました： '_self',。 Safariのファイル名について心配する必要はありません。ここで述べたように、サポートされていないようです。 https://github.com/konklone/json/issues/56 （ http://caniuse.com/#search=download ）

以下のコードは、Mozilla、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();
2
Ricky Boy

Angular 1.5では、$windowサービスを使用してファイルをダウンロードします。

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

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

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

Ajax/XMLHttpRequest/$ httpを使用してWebApiメソッドを呼び出すのではなく、htmlフォームを使用します。そのようにすると、ブラウザーは応答ヘッダー内のファイル名とコンテンツタイプ情報を使用してファイルを保存し、ファイル処理に関するjavascriptの制限を回避する必要はありません。メソッドがデータを返すときに、POSTではなくGETメソッドを使用することもできます。フォームの例を次に示します。

<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

REST呼び出しによって生成されたファイルをダウンロードする最良の方法は、window.locationの例を使用することだと思います。

    $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

IEはa.downloadをサポートしていません。少なくともHTML5の「サポートされている」ページ。 :(

0
Nick Jacobs