Pdf not opening properly generated with dom pdf

I'm generating pdf using dom pdf.

Code :

$dompdf = new Dompdf();
$pdfData=Data::where('id',auth()->user()->id)->first();
$html = view('admin/view-data/',['pdfData'=>$pdfData])->render();
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$fileName = 'filenaname.pdf';
Storage::put('public/pdf'.$fileName, $dompdf->output());

pdf is being generated in the storage/app/public/pdf/ folder

i'm downloading it using vue.js :

Link:

<a   href="#" class="btn btn-xs btn-success" title="Downaload" @click="downloadIt('/storage/'+user.user_id)"><i class="fa fa-file-pdf" aria-hidden="true"></i></a>

Method:

 downloadIt(url) 
{
 var str = url.split("/"); 
 var filename = str[str.length - 1]; 
    axios.get(url, {responseType: 'blob'})
  .then((response) => {
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', filename);
        document.body.appendChild(link);
        link.click();
        })
},

but when i downloaded it i'm getting this message

but when i open it directly from storage folder it is opening. Any solution, Thanks

via Chebli Mohamed