how to download a file in javascript (vue) from response()->download (laravel) ?

I have a button in vue component when click it should download a file from the laravel api server.

const downloadExcelTemplate = () => {
    ApiService.get("/api/admin/download-excel-template").then(response => {
        console.log(response.data)
    }).catch(error => {
        console.log(error.response.data)
    })
}

The server method that handle the request of the file:

 public function downloadExcelTemplate()
{
     return response()->download( storage_path('admin/template/import-excel-template.xls'));
}

From the response I can see the file listed in console (encoded) and in the header response:

Content-Disposition: attachment; filename=import-excel-template.xls
Content-Type: application/vnd.ms-excel

How to download (save) the file when click the download file ?

calin.ionut

5 years ago

Level 5

I solve it

 ApiService.get("/api/admin/download-excel-template", {
	responseType: 'blob'
}).then(response => {
        let fileUrl = window.URL.createObjectURL(response.data);
        let fileLink = document.createElement('a');

        fileLink.href = fileUrl;
        fileLink.setAttribute('download', 'import-excel-template.xls');
        document.body.appendChild(fileLink)

        fileLink.click();
    }).catch(error => {
        console.log(error.response.data)
    })

Ferid

3 years ago

Level 6

@calin.ionut hey man. Can you help me for doing same? I'm getting this error when I'm doing same thing Uncaught (in promise) TypeError: URL.createObjectURL: Argument 1 is not valid for any of the 1-argument overloads.

Please or to participate in this conversation.