Vue + Laravel: How to properly download a PDF file? : <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>
