download filled html form as pdf

Question

I opened a printed Form with Acrobat and made all elements work with online filing. Then I converted the whole document to HTML and implemented it on my website, which works well. You can edit and fill all fields and the original style from the printed form is preserved with CSS. Now it should be possible to save the filled Form to pdf and download it, but I'm struggling to find a way to do this.

I tried it with the code below (html2canvas). I wrapped the 4 pages of the Form with class="print-wrap page1" and so on. When I now click download to pdf it creates a pdf that is out of shape and contains none of the filled information, but the static form.

I think this happens because html2canvas doesn't use the CSS from the Form, and also doesn't use the data you fill in on the page.

So maybe this solution doesn't fit my needs, and I have no other solutions. Also, the form is way too complex to edit each field when there is a solution then it has to be a way to basically auto screenshot the page to pdf or a print to pdf button.

What I need: A way to capture a CSS styled Form (or capture the whole page as screenshot), including all typed in data (this is the most important). Then convert it do pdf upon click.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script>
    $(document).ready(function() {
    //Generate PDF
    function generatePDF() {
        window.scrollTo(0, 0);

        var pdf = new jsPDF('p', 'pt', [580, 630]);

        html2canvas($(".page1")[0], {
            onrendered: function(canvas) {
                document.body.appendChild(canvas);
                var ctx = canvas.getContext('2d');
                //ctx.scale(2, 2);
                var imgData = canvas.toDataURL("image/png", 1.0);
                var width = canvas.width;
                var height = canvas.clientHeight;
                pdf.addImage(imgData, 'PNG', 20, 20, (width - 10), (height));

            }
        });
        html2canvas($(".page2")[0], {
            allowTaint: true,
            onrendered: function(canvas) {
                var ctx = canvas.getContext('2d');
                ctx.scale(2, 2);
                var imgData = canvas.toDataURL("image/png", 1.0);
                var htmlH = $(".page2").height() + 100;
                var width = canvas.width;
                var height = canvas.clientHeight;
                pdf.addPage(580, htmlH);
                pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height));
            }
        });
        html2canvas($(".page3")[0], {
            allowTaint: true,
            onrendered: function(canvas) {
                var ctx = canvas.getContext('2d');
                ctx.scale(2, 2);
                var imgData = canvas.toDataURL("image/png", 1.0);
                var htmlH = $(".page2").height() + 100;
                var width = canvas.width;
                var height = canvas.clientHeight;
                pdf.addPage(580, htmlH);
                pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height));
            }
        });
             html2canvas($(".page4")[0], {
            allowTaint: true,
            onrendered: function(canvas) {
                var ctx = canvas.getContext('2d');
                ctx.scale(2, 2);
                var imgData = canvas.toDataURL("image/png", 1.0);
                var htmlH = $(".page2").height() + 100;
                var width = canvas.width;
                var height = canvas.clientHeight;
                pdf.addPage(580, htmlH);
                pdf.addImage(imgData, 'PNG', 20, 20, (width - 40), (height));
            }
        });
        setTimeout(function() {

            //jsPDF code to save file


            //Generate BLOB object
            var blob = pdf.output("blob");

            //Getting URL of blob object
            var blobURL = URL.createObjectURL(blob);

            //Showing PDF generated in iFrame element


            //Setting download link
            var downloadLink = document.getElementById('pdf-download-link');
            downloadLink.href = blobURL;
        }, 0);

    };
    generatePDF();
});
</script>
<style>.print-wrap { width: 500px; }</style>

Answer 1

try a plugin like https://github.com/eKoopmans/html2pdf

download the source code and add

then

var element = document.getElementById('element-to-print');
 html2pdf(element, {
     margin:       1,
     filename:     'myfile.pdf',
     image:        { type: 'jpeg', quality: 0.98 },
     html2canvas:  { dpi: 192, letterRendering: true },
     jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait'}
});

hope this helps