Download File From Backend Laravel Using Vue As Frontend

I have created controller in Laravel which contains following code $doc = Document::find($id); if (Storage::disk('local')->exists($doc->path)) { return Storage::disk('l

Solution 1:

Use the download() method witht the proper headers instead:

return Storage::download($doc->path, basename($doc->path), [
    'Content-Description' => 'File Transfer',
    'Content-Type' => mime_content_type($doc->path),
]);

---

In case you want to sent the file as raw text to the client and let it decide what to do with it:

return response(Storage::disk('local')->get($doc->path))->withHeaders([
    'Content-Description' => 'File Transfer',
    'Content-Type' => mime_content_type($doc->path),
]);

Solution 2:

If someone came across simillar issue you can do following to solve it

Laravel/backend Code:

$path = storage_path() . '/app/' . $doc->path;
        return response()->download($path);

Define path of your file and response it with download()

Frontend Code:

asyncdownloadDocument() {
  axios({
    url: "/api/documents/" + this.document.id,
    method: "GET",
    responseType: "blob", // important
  }).then((response) => {
    // Service that handles ajax callconst url = window.URL.createObjectURL(newBlob([response.data]));
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", this.document.name);
    document.body.appendChild(link);
    link.click();
    link.remove();
  });
},

},

Remember responseType is important, else your downloaded file(pdf, image) won't show any content.

Hope this answer can help someone.