Mi función puede descargar el archivo exacto que quiero usando laravel y vue.js, pero cuando intento abrir el archivo descargado, muestra un tipo de archivo no compatible .
Mi función vue.js para obtener la información del archivo:
downloadFile(file){ this.$axios.post(`file/download`, file).then(({data}) => { this.download(data, file) }) },Mi controlador Laravel:
$file = public_path() . "/images/" . $request['file_name']; $headers = ['Content-Type' => 'application/jpeg']; return response()->download($file, $request['file_name'], $headers);Y finalmente, mi función vue.js para descargar la imagen creando el enlace URL:
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(); }Debido a que el backend ya devuelve datos de "descarga", no debe buscarlos en el frontend y luego abrirlos en una nueva pestaña. Puede abrirlo en una nueva pestaña sin buscar
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(); }También en la parte de back-end deberías tener un método como este con la ruta "get"
public function download($filename) { $file = public_path() . "/images/" . $filename; $headers = ['Content-Type' => 'application/jpeg']; return response()->download($file, $filename, $headers); }