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();
});
