Downloaded File not supported from laravel using vue.js

Question

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

Answer 1

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