I have an html which contains some headers and tables. Here is my code below to convert the html to pdf using jspdf library (referred from https://www.freakyjolly.com/html2canvas-multipage-pdf-tutorial/).

var pdf,page_section,HTML_Width,HTML_Height,top_left_margin,PDF_Width,PDF_Height,canvas_image_width,canvas_image_height;

function calculatePDF_height_width(selector,index){
    page_section = document.querySelector(selector);
    HTML_Width = page_section.clientWidth;
    HTML_Height = page_section.clientHeight;
    top_left_margin = 15;
    PDF_Width = HTML_Width + (top_left_margin * 2);
    PDF_Height = (PDF_Width * 1.2) + (top_left_margin * 2);
    canvas_image_width = HTML_Width;
    canvas_image_height = HTML_Height;
}


function createPDFfromHTML() {
    let pdf = ""
    // report-content-2 is the section I want to get the pdf for
    html2canvas(document.querySelector("#report-content-2"), { allowTaint: true }).then(function(canvas) {

        calculatePDF_height_width("#report-content-2",2);
        
        var imgData = canvas.toDataURL("image/jpg", 1.0);
        pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
        pdf.addPage([PDF_Width, PDF_Height]);
        
        pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, HTML_Width, HTML_Height);

        pdf.save("report.pdf");
       
           
    });
};

But all it does is gets a single page worth of content. Instead of going multi page and get all the content. Also for some reason it keeps the first page blank. The content shows up on second page.

How do I make it work such that I get the full content spanned across multiple pages?