Download pdf via Axios in VueJS 3 from Laravel API

Question

hello I have a frontend with VUEJS 3 and backend Laravel 8. I would download a pdf saved in public/pdf/temp/file.pdf

Now I make a a call from VUEJS:

axios.post('/api/'+ this.url_access +'/rebuild', formData, { headers: {
                'Content-Type': 'multipart/form-data',
                'responseType': 'blob'
            }})
            .then(response=>{
                if(response.status == 200){
                    const url = window.URL.createObjectURL(new Blob([response.data]));
                    const link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download', 'test.pdf');
                    document.body.appendChild(link);
                    link.click();
                }
            })
            .catch(error=>{
                console.log(error);
            })

and in the backend I have a function that return pdf file:

try{
   $headers = [
       'Content-Type' => 'application/pdf',
   ];
   return response()->download($file_path, $workspace['name'] . '_' .date("Ymd").'.pdf', $headers)->deleteFileAfterSend(true);
}catch(Exception $e){
   return $e->getMessage();
}

But I downloaded the blank content pdf.

Anyone have any idea for this problem?

Do you need to prefix the url you are using for the source or pass in a second arguement into the Blob constructor like `new Blob([response.data], {type: 'application/pdf'})`. I think without it it will just load a blank page because the blob data is being used for the url. Like if you are sending it raw data without telling it what that data is for it doesn't know how to handle it. https://stackoverflow.com/questions/30864573/what-is-a-blob-url-and-why-it-is-used — amac, Aug 23 '22 at 05:08

score 0 · Answer 1 · answered Jan 21 '23 at 11:22

0

In Laravel

$pdf = PDF::loadView('users.pdf', ['data' => $data]);
 return $pdf->output();

In Vue js

axios({
  url: 'http://localhost:8000/api/your-route',
  method: 'GET',
  responseType: 'blob',
}).then((response) => {
 var fileURL = window.URL.createObjectURL(new Blob([response.data], {type: 
 'application/pdf'}));
 var fileLink = document.createElement('a');
 fileLink.href = fileURL;
 fileLink.setAttribute('download', 'file.pdf');
 document.body.appendChild(fileLink);
 fileLink.click();
 });

answered Jan 21 '23 at 11:22

Ali Hussein

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 25 '23 at 19:16

score -1 · Accepted Answer · answered Aug 29 '22 at 03:33

Answer

responseType is a sibling of headers, not a child

axios.post('/api/'+ this.url_access +'/rebuild', formData, { headers: {
                'Content-Type': 'multipart/form-data',
            },
                'responseType': 'blob' // responseType is a sibling of headers, not a child
            })
            .then(response=>{
                if(response.status == 200){
                    const url = window.URL.createObjectURL(new Blob([response.data]));
                    const link = document.createElement('a');
                    link.href = url;
                    link.setAttribute('download', 'test.pdf');
                    document.body.appendChild(link);
                    link.click();
                }
            })
            .catch(error=>{
                console.log(error);
            })

Thank you for Phil helping.

Download pdf via Axios in VueJS 3 from Laravel API

2 Answers2