title: AngularJS: download pdf file from the server
body: <p>I want to download a pdf file from the web server using <code>$http</code>. I use this code which works great, my file only is save as a html file, but when I open it it is opened as pdf but in the browser. I tested it on Chrome 36, Firefox 31 and Opera 23.</p>
  
  <p>This is my angularjs code (<a href="https://stackoverflow.com/a/24129082/1295344">based on this code</a>):</p>
  
  <pre><code>UserService.downloadInvoice(hash).success(function (data, status, headers) {
                      var filename,
                          octetStreamMime = "application/octet-stream",
                          contentType;
  
                      // Get the headers
                      headers = headers();
  
                      if (!filename) {
                          filename = headers["x-filename"] || 'invoice.pdf';
                      }
  
                      // Determine the content type from the header or default to "application/octet-stream"
                      contentType = headers["content-type"] || octetStreamMime;
  
                      if (navigator.msSaveBlob) {
                          var blob = new Blob([data], { type: contentType });
                          navigator.msSaveBlob(blob, filename);
                      } else {
                          var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL;
  
                          if (urlCreator) {
                              // Try to use a download link
                              var link = document.createElement("a");
  
                              if ("download" in link) {
                                  // Prepare a blob URL
                                  var blob = new Blob([data], { type: contentType });
                                  var url = urlCreator.createObjectURL(blob);
  
                                  link.setAttribute("href", url);
                                  link.setAttribute("download", filename);
  
                                  // Simulate clicking the download link
                                  var event = document.createEvent('MouseEvents');
                                  event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
                                  link.dispatchEvent(event);
                              } else {
                                  // Prepare a blob URL
                                  // Use application/octet-stream when using window.location to force download
                                  var blob = new Blob([data], { type: octetStreamMime });
                                  var url = urlCreator.createObjectURL(blob);
                                  $window.location = url;
                              }
                          }
                      }
                  }).error(function (response) {
                      $log.debug(response);
                  });
  </code></pre>
  
  <p>On my server I use Laravel and this is my response:</p>
  
  <pre><code>$headers = array(
                  'Content-Type' =&gt; $contentType,
                  'Content-Length' =&gt; strlen($data),
                  'Content-Disposition' =&gt; $contentDisposition
              );
  
              return Response::make($data, 200, $headers);
  </code></pre>
  
  <p>where <code>$contentType</code> is <code>application/pdf</code> and <code>$contentDisposition</code> is <code>attachment; filename=" . basename($fileName) . '"'</code></p>
  
  <p>$filename - e.g. <code>59005-57123123.PDF</code></p>
  
  <p>My response headers:</p>
  
  <pre><code>Cache-Control:no-cache
  Connection:Keep-Alive
  Content-Disposition:attachment; filename="159005-57123123.PDF"
  Content-Length:249403
  Content-Type:application/pdf
  Date:Mon, 25 Aug 2014 15:56:43 GMT
  Keep-Alive:timeout=3, max=1
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/5fNpm.png" alt="enter image description here"></p>
  
  <p>What am I doing wrong?</p>