Download text csv content as files from server in Angular

Question

I am trying to stream a csv file from a node js server  The server portion is very simple    server get   orders  function req  res      res setHeader  content-type    text csv      res setHeader  content-disposition    attachment  filename  orders csv      return orders pipe res      assuming orders is a csv file readable stream  doesn t have to be a stream  can be a normal response      In my angular controller I am trying to do something like this    scope csv   function          http  method   GET   url    orders          This function is called when there s a click on a button with ng-click in my view     lt button ng-click  csv    gt  csv lt  button gt    I have looked at other answers about downloading files from server in Angular  but didn t find anything that worked for me  Is there a common way to do this   Seems like something that should be simple

User · Answer

var anchor   angular element   lt a  gt     anchor css  display   none        Make sure it s not visible angular element document body  append anchor      Attach to document  anchor attr       href   data attachment csv charset utf-8     encodeURI data       target    blank       download   filename csv     0  click     anchor remove       Clean it up afterwards   This code works both Mozilla and chrome

User · Answer

http service returns a promise which has two callback methods as shown below    http  method   GET   url    someUrl       success function data  status  headers  config         var anchor   angular element   lt a  gt          anchor attr            href   data attachment csv charset utf-8     encodeURI data            target    blank            download   filename csv          0  click             error function data  status  headers  config           handle error

User · Answer

This is what worked for me for IE 11   Firefox and Chrome   In safari it downloads a file but as unknown and the filename is not set   if  window navigator msSaveOrOpenBlob        var blob   new Blob  csvDataString       csv data string as an array         IE hack  see http   msdn microsoft com en-us library ie hh779016 aspx     window navigator msSaveBlob blob  fileName     else       var anchor   angular element   lt a  gt         anchor css  display   none        Make sure it s not visible     angular element document body  append anchor      Attach to document for FireFox      anchor attr           href   data attachment csv charset utf-8     encodeURI csvDataString           target    blank           download  fileName    0  click    anchor remove

User · Answer

Using angular 1 5 9  I made it working like this by setting the window location to the csv file download url  Tested and its working with the latest version of Chrome and IE11   Angular      scope downloadStats   function downloadStats          var csvFileRoute     stats download            window location   url          html   lt a target   self  ng-click  downloadStats    gt  lt i class  fa fa-download  gt  lt  i gt  CSV lt  a gt    In php set the below headers for the response    headers          content-type                 gt   text csv        Content-Disposition          gt   attachment  filename  export csv         Cache-control                gt   private  must-revalidate  post-check 0  pre-check 0        Content-transfer-encoding    gt   binary        Expires    gt   0        Pragma    gt   public

User · Answer

Most of the references on the web about this issue point out to the fact that you cannot download files via ajax call  out of the box   I have seen  hackish  solutions that involve iframes and also solutions like  dcodesmith s that work and are perfectly viable    Here s another solution I found that works in Angular and is very straighforward   In the view  wrap the csv download button with  lt a gt  tag the following way     lt a target   self  ng-href    csv link    gt     lt button gt download csv lt  button gt   lt  a gt     Notice the target   self there  it s crucial to disable Angular s routing inside the ng-app more about it here   Inside youre controller you can define csv link the following way     scope csv link     orders     window location search     the  window location search is optional and onlt if you want to pass additionaly search query to your server   Now everytime you click the button  it should start downloading

[javascript] Download text/csv content as files from server in Angular

Examples related to javascript

Examples related to node.js

Examples related to angularjs

Examples related to http

Examples related to http-headers