Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

CrastyCrap's avatar

Download file by using laravel vue

Greating everyone i am facing problem to download file by using laravel vue . i return the value of the file as blob and send it to vue and download it but the downloaded file contain the blob value not the file

(Note: i am using laravel lighthouse for connection between vue and laravel)

my laravel code

       static function exportUserExcel()
    {
        $name = md5(rand(10000000000,99999999999)).'.xlsx';
        return Excel::download(new UsersExport,$name);
    }

my vue code

downloadUsersExcel()
        {
            let auth_token =  localStorage.getItem('auth_token');
            return axios({
                method: "POST",
                url: import.meta.env.VITE_APP_END_POINT+'/graphql',
                headers: {
                    "Authorization": `Bearer ${auth_token}`
                },
                data: {
                    query: `
                        query {
                            userExport
                        }
                    `
                }
            }).then((response) => {
                console.log(response);
                let file = response.data.data.userExport;
                console.log(file)
                const url = URL.createObjectURL(new Blob([file], {
                    type: 'application/vnd.ms-excel'
                }))
                const link = document.createElement('a')
                link.href = url
                link.setAttribute('download', 'users.xlsx');
                console.log(link);
                document.body.appendChild(link);
                link.click();
            })
        }

the downloaded file contain

HTTP/1.0 200 OK
Cache-Control:       public
Content-Disposition: attachment; filename=0303587b95ed9bdc3da308a62d5745b1.xlsx
Date:                Sat, 16 Jul 2022 22:25:52 GMT
Last-Modified:       Sat, 16 Jul 2022 22:25:52 GMT



0 likes
1 reply
vincent15000's avatar

I just found this on the web.

axios({
                  url: 'api/downloadPdf',
                  method: 'GET',
                  responseType: 'arraybuffer',
              }).then((response) => {
                   let blob = new Blob([response.data], {
                            type: 'application/pdf'
                        })
                        let link = document.createElement('a')
                        link.href = window.URL.createObjectURL(blob)
                        link.download = 'test.pdf'
                        link.click()
              });

I think that the solution i probably somewhere with the responseType and the blob.

Please or to participate in this conversation.