title: Vue + Laravel: How to properly download a PDF file?
body: <p><strong>THE SITUATION:</strong></p>
  
  <p>Frontend: Vue. Backend: Laravel.</p>
  
  <p>Inside the web app I need to let the user download certain pdf files:</p>
  
  <ul>
  <li>I need Laravel to take the file and return it as a response of an API GET request.</li>
  <li>Then inside my Vue web app I need to get the file and download it.</li>
  </ul>
  
  <p><strong>THE CODE:</strong></p>
  
  <p><strong>API:</strong></p>
  
  <pre><code>$file = public_path() . "/path/test.pdf";
  
  $headers = [
      'Content-Type' =&gt; 'application/pdf',
  ];
  return response()-&gt;download($file, 'test.pdf', $headers);
  </code></pre>
  
  <p><strong>Web app:</strong></p>
  
  <pre><code>downloadFile() {
    this.$http.get(this.apiPath + '/download_pdf')
      .then(response =&gt; {
        let blob = new Blob([response.data], { type: 'application/pdf' })
        let link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = 'test.pdf'
        link.click()
      })
  }
  </code></pre>
  
  <p><strong>OUTCOME:</strong></p>
  
  <p>Using this code I do manage to download a pdf file. The problem is that the pdf is blank. </p>
  
  <p>Somehow the data got corrupted (not a problem of this particular pdf file, I have tried with several pdf files - same outcome)</p>
  
  <p><strong>RESPONSE FROM SERVER:</strong></p>
  
  <p>The response itself from the server is fine:</p>
  
  <p><a href="https://i.stack.imgur.com/E0nCJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/E0nCJ.png" alt="enter image description here"></a></p>
  
  <p><strong>PDF:</strong></p>
  
  <p>The problem may be with the pdf file. It definitely looks corrupted data. This is an excerpt of how it looks like the <code>response.data</code>:</p>
  
  <p><a href="https://i.stack.imgur.com/0F2OW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0F2OW.png" alt="enter image description here"></a></p>
  
  <p><strong>THE QUESTION:</strong></p>
  
  <p>How can I properly download a pdf file using Laravel for the API and Vue for the web app?</p>
  
  <p>Thanks!</p>