Trying to download PDF file from laravel API and vuejs front but always gets empty pdf file

Question

this problem has got me stuck for days now. Am consuming an API built in laravel 8. A PDF file is created using laravel domPDF and is already saved in a directory. All am trying to do is download it using the Vue js but when i download, i get a blank PDF file. Header response-Type is set to 'blob' in both API and VueJS

Code from Laravel API;

  public function download_invoice(Request $request)
    {
        $invoice_id = $request->input('invoice_id');
        $path = public_path('images/pdf').'/'.$invoice_id.'.pdf';
        $headers = [
              'responseType' => 'blob'
           ];         
        return response()->download($path, $invoice_id.'.pdf', $headers);

    }

Code from VueJS;

 downloadInvoice(item){
        this.$http.post('downloadinvoice', item, {headers:{
               Authorization:`Bearer ${this.token}`,
               responseType: 'blob',
          }})
       .then(res=> {
        const fileName = item.invoice_id+'.pdf';
        const url = window.URL.createObjectURL(new Blob([res.data], { type: 
        'application/pdf' }));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
       })
      }

Sample console response from API;

%PDF-1.7
1 0 obj
<< /Type /Catalog
/Outlines 2 0 R
/Pages 3 0 R >>
endobj
2 0 obj
<< /Type /Outlines /Count 0 >>
endobj
3 0 obj
<< /Type /Pages
/Kids [6 0 R
]
/Count 1
/Resources <<
/ProcSet 4 0 R
/Font << 
/F1 8 0 R
/F2 9 0 R
>>
/XObject << 
/I1 10 0 R
>>
>>
/MediaBox [0.000 0.000 595.280 841.890]
 >>
endobj
4 0 obj
[/PDF /Text /ImageC ]
endobj
5 0 obj

Can't post the entire response from the console, keeping it simple.

Answer 1

You are sending this.$http.post('downloadinvoice', item, ( Item from front end not invoice_id ? and you are getting $request->input('invoice_id'); in your back-end code