download csv file from web api in angular js

Question

my API controller is returning a csv file as seen below        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          and my angularjs that will send and receive the csv file is shown below    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  it downloads a file which is called document but has no file type extension  The content of the file is  Object object    In IE10  nothing is downloaded   What could i do to fix this    UPDATE  This might work for you guys out there with the same problem  link

User · Answer

I think the best way to download any file generated by REST call is to use window.location example :

_x000D_

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

_x000D_

User · Answer

Workable solution  downloadCSV data       const newBlob   new Blob  decodeURIComponent encodeURI data       type   text csv charset utf-8                   IE doesn t allow using a blob object directly as link href            instead it is necessary to use msSaveOrOpenBlob         if  window navigator  amp  amp  window navigator msSaveOrOpenBlob              window navigator msSaveOrOpenBlob newBlob             return                        For other browsers             Create a link pointing to the ObjectURL containing the blob          const fileData   window URL createObjectURL newBlob            const link   document createElement  a            link href   fileData          link download    Usecase-Unprocessed csv              this is necessary as link click   does not work on the latest firefox         link dispatchEvent new MouseEvent  click     bubbles  true  cancelable  true  view  window               setTimeout function                   For Firefox it is necessary to delay revoking the ObjectURL           window URL revokeObjectURL fileData             link remove               5000

User · Answer

The last answer worked for me for a few months  then stopped recognizing the filename  as adeneo commented        Scott s answer here is working for me   Download file from an ASP NET Web API method using AngularJS

User · Answer

Try it like    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          based on the most excellent answer in this question

User · Answer

The a download is not supported by IE    At least at the HTML5  supported  pages

User · Answer

I had to implement this recently  Thought of sharing what I had figured out   To make it work in Safari  I had to set target    self    Don t worry about filename in Safari  Looks like it s not supported as mentioned here  https   github com konklone json issues 56  http   caniuse com  search download   The below code works fine for me in Mozilla  Chrome  amp  Safari     var anchor   angular element   lt a  gt       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

User · Answer

Rather than use Ajax   XMLHttpRequest    http to invoke your WebApi method  use an html form  That way the browser saves the file using the filename and content type information in the response headers  and you don t need to work around javascript s limitations on file handling  You might also use a GET method rather than a POST as the method returns data  Here s an example form    lt form name  export  action   MyController Export  method  get  novalidate gt       lt input name  id  type  id  ng-model  id  placeholder  ID    gt       lt input name  fileName  type  text  ng-model  filename  placeholder  file name  required   gt       lt span class  error  ng-show  export fileName  error required  gt Filename is required  lt  span gt       lt button type  submit  ng-disabled  export  invalid  gt Export lt  button gt   lt  form gt

User · Answer

In Angular 1 5  use the  window service to download a file   angular module  app csv   factory  csvService   csvService    csvService  inject      window     function csvService  window        function downloadCSV urlToCSV             window location   urlToCSV

User · Answer

I used the below solution and it worked for me    x000D   x000D   if  window navigator msSaveOrOpenBlob    x000D     var blob   new Blob  decodeURIComponent encodeURI result data       x000D       type   text csv charset utf-8   x000D         x000D     navigator msSaveBlob blob   filename csv    x000D     else   x000D     var a   document createElement  a    x000D     a href    data attachment csv charset utf-8     encodeURI result data   x000D     a target     blank   x000D     a download    filename csv   x000D     document body appendChild a   x000D     a click    x000D     x000D   x000D   x000D

User · Answer

None of those worked for me in Chrome 42     Instead my directive now uses this link function  base64 made it work      link  function scope  element  attrs        var downloadFile   function downloadFile           var filename   scope getFilename          var link   angular element   lt a  gt           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

[javascript] download csv file from web api in angular js

Examples related to javascript

Examples related to angularjs

Examples related to csv

Examples related to asp.net-web-api

Examples related to httpresponse