title: Download excel file in browser using blob
body: <p>I have a requirement to download an excel file in the browser. I am using nodejs in the back end and plain JavaScript in the front end. </p>
  
  <p>My API endpoint is '<a href="https://callerid-lookup.herokuapp.com/download" rel="nofollow noreferrer">https://callerid-lookup.herokuapp.com/download</a>'</p>
  
  <pre><code>/download/excel 
  
  
  res.status(200);
  var path = './report.xlsx';
  fs.readFile(path, function (err, data) {
      res.setHeader('Content-disposition', 'attachment; filename=report.xlsx');
      res.setHeader('Content-type', 'application/vnd.ms-excel');
      console.log('server side1', data);
      res.send(data);
  });
  </code></pre>
  
  <p>Front end code looks like following </p>
  
  <pre><code> $.get("https://callerid-lookup.herokuapp.com/download", {
      responseType : 'ArrayBuffer'
  },
      function (data, status) {
      console.log("Data: " + data + "\nStatus: " + status);
      var blob = new Blob([data], {
              type : 'application/vnd.ms-excel'
          });
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = "report.xlsx";
      link.click();
  });
  </code></pre>
  
  <p>I can see the file downloading, but there is only [Object, Object] in the excel file downloaded in the first cell. </p>
  
  <p>I tried giving 'responseType'  as 'arraybuffer/blog' in the http request, but nothing worked for me, help is appreciated </p>
  
  <p>Log file: </p>
  
  <p>client receive data: <a href="https://www.dropbox.com/s/w46o9gqt7z99bzt/client-response.txt?dl=0" rel="nofollow noreferrer">https://www.dropbox.com/s/w46o9gqt7z99bzt/client-response.txt?dl=0</a></p>
  
  <p>server sending data: <a href="https://www.dropbox.com/s/xu7nzelbjbmzjwj/server-response.txt?dl=0" rel="nofollow noreferrer">https://www.dropbox.com/s/xu7nzelbjbmzjwj/server-response.txt?dl=0</a></p>
  
  <p><strong>Updated with Sample API endpoint and jquery UI code</strong> </p>