I am trying to download cv as pdf on button click in my cv builder using JS but unfortunately, the function instead of being called on button click is called as soon as the page loads. I tried some other ways including the arrow function and onclick attribute of the button although after that downloading starts on the button click but the pdf turns out to be empty.

Code: HTML:

<div class="container profile-box" id="f">
<!-- Code of whole cv template -->
</div>
 <div class="col-md-12 text-center">
 <button type="button" class="btn btn-primary" id="pdf" >Download Pdf</button>
 </div>

JS:

var btnpdf=document.getElementById("pdf");


async function generatepdf(){
   
    var downloading=document.getElementById("f");
    let width1 = downloading.offsetWidth;
    let height1 = downloading.offsetHeight;
    var doc=new jsPDF('p','pt');
    await html2canvas(downloading,{
        allowTaint:true,
        useCORS:true,
        width:width1,
        height:height1
        
    }).then((canvas)=>{
        //canvas convert to png
        doc.addImage(canvas.toDataURL("image/png"),'PNG',10,10);

    })
    doc.save("cv.pdf");
    
}
 btnpdf.addEventListener("click",generatepdf());