Checkboxes Not Rendering with jsPDF

Question

I have a page that auto-populates a form based on some SQL data. The formatting of the form mirrors a form that some users are currently having to manually populate, so this is designed to make sure the form is populated completely and accurately from SQL instead, and save the users some time. As a result though, the formatting of the form has to be exactly like it currently is.

I then have a button that the user clicks at the bottom of the form, and it uses jsPDF and html2canvas to turn the 3 "page" divs into a 3 page PDF that is automatically sent to our s3 server for them to access through their files page.

Everything is basically working perfectly now, except, there is a column of checkboxes on the first page that are used to document if anything in the form has been "changed." You can see an example here. Basically, if the answer to any of the questions is "yes" it auto-checks the box "yes," but also there's a Javascript function that writes a SQL table if they (un)click a box and persists the change.

Example of Form w Checkbox

My scripts for jQuery, jsPDF, and html2canvas

Here's the HTML where the checkbox is:


Assignment of Benefits (AOB)

 checked  >

The PHP is echoing the results of some SQL queries.

At the bottom of the page is a button for the Javascript function that creates the PDF

I used some code from this answer to create a recursive function for jsPDF

function createPdf(claimid, title) {

    var pdf = new jsPDF('p', 'pt', 'a4');
        var pdfName = 'test.pdf';

        var options = {};

        var $divs = $('.page')                //jQuery object of all the myDivClass divs
        var numRecursionsNeeded = $divs.length -1;     //the number of times we need to call addHtml (once per div)
        var currentRecursion=0;

        //Found a trick for using addHtml more than once per pdf. Call addHtml in the callback function of addHtml recursively.
        function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
            //Once we have done all the divs save the pdf
            if(currentRecursion==totalRecursions){
                // pdf.save(pdfName);

                var pdfFile = btoa(pdf.output()); 
                $.ajax({
                    method: "POST",
                    url: "velocityform_s3save.php",
                    data: {
                        data: pdfFile,
                        claimid: claimid,
                        title: title,
                    },
                }).done(function(data){
                    console.log(data);
                });

            }else{
                currentRecursion++;
                pdf.addPage();
                //$('.page')[currentRecursion] selects one of the divs out of the jquery collection as a html element
                //addHtml requires an html element. Not a string like fromHtml.
                pdf.addHTML($('.page')[currentRecursion], 15, 20, options, function(){
                    console.log(currentRecursion);
                    recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
                });
            }
        }

        pdf.addHTML($('.page')[currentRecursion], 15, 20, options, function(){
            recursiveAddHtmlAndSave(currentRecursion, numRecursionsNeeded);
        });
}

I have Ajax going to a php page that saves the form to s3 instead of just saving locally, but that's not really relevant, because when I use

pdf.save(pdfName);

I get a locally saved PDF which also does not render the checkboxes. When the PDF renders, it looks like this:

PDF Generated

Everything else is doing exactly what I need it to do, except this one detail. I used jsPDF instead of something like TCPDF because between the CSS, PHP, HTML, and Javascript it just wasn't able to render a remotely well formatted PDF. As of yet, jsPDF is the only thing I've found that's been able to render the 3 pages in proper formatting. Any help getting the checkboxes to render into the PDF is appreciated.

Thanks.

Checkboxes Not Rendering with jsPDF

Answers (1)

Related Questions