JsPDF - Change filename based on a label value the download the PDF

Question

I used jsPDF and html2canvas to take a screenshot of a div and add it to PDF then download it. My code is working just fine but what I need is to change the PDF filename based on a label value inside my div.

For example:

The label value is "John_Simith", the PDF filename I want to be John_Simith.pdf, but when the label value became "Sarah" I need the filename to be Sarah.pdf.

Here is my Javascript:

function getPDF() {

            var HTML_Width = $(".canvas_div_pdf").width();
            var HTML_Height = $(".canvas_div_pdf").height();
            var top_left_margin = 15;
            var PDF_Width = HTML_Width;
            var PDF_Height = HTML_Height;
            var canvas_image_width = HTML_Width;
            var canvas_image_height = HTML_Height * 1.1;

            var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;


            html2canvas($(".canvas_div_pdf")[0], { allowTaint: true }).then(function (canvas) {
                canvas.getContext('2d');

                console.log(canvas.height + "  " + canvas.width);


                var imgData = canvas.toDataURL("image/jpeg", 1.0);
                var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
                pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);


                for (var i = 1; i <= totalPDFPages; i++) {
                    pdf.addPage(PDF_Width, PDF_Height);
                    pdf.addImage(imgData, 'JPG', 0, 0, canvas_image_width, canvas_image_height);
                }



                pdf.save("Sample.pdf");
                location.reload(true);
            });
        };

I'm not sure how to do this, so please I need your advice and much appreciated.

Answer 1

I'd like to let you know that I could solve the issue and will post it in case in future someone needs the answer;

First create another textbox and surround it with a hidden div like this;

<div style="visibility:hidden"> <asp:TextBox ID="lblFname" runat="server" Text="0"></asp:TextBox> </div>

Then create a session to retrieve the value from the database using SqlDataReader;

Session["Fname"] = dritem["first_name"].ToString();

Then bind the session value with the textbox you just created;

lblFname.Text = Session["Fname"].ToString();

Then declare a variable to access the textbox in Javascript;

  var FirstName = document.getElementById("<%=lblFname.ClientID%>").value;

At the end use the variable as filename for the PDF to download;

  pdf.save(FirstName + "_.pdf");

Thank you all,