Vue + Laravel: How to properly Export/Download generated pdf or excel files

Vue + Laravel: How to properly Export/Download file

Example How to download generated csv file.

Laravel return the file as a response of an API GET request.

return Excel::download(new DataExport($data), $filename);

Then inside Vue web app you need to get the file and download it:

downloadFile() {
  AXIOS.get(this.appApiPath + '/testpdf',
       {responseType: 'arraybuffer'})
   .then(response => {
        var fileURL = window.URL.createObjectURL(new Blob([response.data]));
        var fileLink = document.createElement('a');
        fileLink.href = fileURL;
        fileLink.setAttribute('download', 'test.xlsx');
       document.body.appendChild(fileLink);
       fileLink.click();
    })
}

Example How to download generated pdf.

from laravel backend:

$pdf = PDF::loadView('users.pdf', ['data' => $data]);
return $pdf->output();

from vuejs frontend:

axios({
url: 'http://localhost:8000/api/your-route',
method: 'GET',
{responseType: 'blob'},
}).then((response) => {
     var fileURL = window.URL.createObjectURL(new Blob([response.data], {type: 'application/pdf'}));
     var fileLink = document.createElement('a');
     fileLink.href = fileURL;
     fileLink.setAttribute('download', 'file.pdf');
     document.body.appendChild(fileLink);
     fileLink.click();

});