My function can download the exact file I want using laravel and vue.js, but when I try to open the downloaded file, it show unsupported file type.
My vue.js function to get the file info:
downloadFile(file){
this.$axios.post(`file/download`, file).then(({data}) => {
this.download(data, file)
})
},
My Laravel controller:
$file = public_path() . "/images/" . $request['file_name'];
$headers = ['Content-Type' => 'application/jpeg'];
return response()->download($file, $request['file_name'], $headers);
And finally, my vue.js function to download the image creating the URL link:
download(data, file) {
const url = window.URL.createObjectURL(new Blob([data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', file.file_name);
document.body.appendChild(link);
link.click();
}
Because the backend already returns "download" data You shouldn't fetch it in the frontend and then open it in a new tab. You can open it in a new tab without fetching
downloadFile(fileName){
this.download(fileName)
},
download(file_name) {
const link = document.createElement('a');
link.href = `yoururl/${file_name}`;
link.setAttribute('download', file_name);
document.body.appendChild(link);
link.click();
}
Also in the backend part you should have a method like this with "get" route
public function download($filename) {
$file = public_path() . "/images/" . $filename;
$headers = ['Content-Type' => 'application/jpeg'];
return response()->download($file, $filename, $headers);
}