Exporting HTML form to PDF with input field initialized by js does not appear in the PDF document

Question

I have an HTML form where each input tag has its empty value attribute. This value attribute must be filled randomly by a javascript code. So far everything is OK. The problem is that when I use the plugin (jspdf) to submit this form to a pdf output, the form value field does not appear in the pdf document output. With this the document is exported only with the label, without its contents.

The selected name appears on the screen but unfortunately is not set in the value property of the input tag and therefore does not appear in the pdf document when it is exported.

My question, is there any way I can force the completion of the input tag value property by javascript code?

As can be seen in the print it has the name generated "Monk", but when inspecting the element its value attribute is empty. When I send the download via pdf the document is as below:

Answer 1

Using jsPDF- http://mrrio.github.io/jsPDF/#

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

pdf.addHTML(document.body,function() {
    //Funcionou !
});

Answer 2

To generate PDF the best tool is jsPDF. With it you can print the section of your HTML you want. There are a number of plugins that can be mixed with jsPDF & autoTable that lets you print a full table or jspdf & html2canvas that lets you take a photo of a page or section to print.

In this case I use jspdf & html2canvas.

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {   
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<div id="content">
    <h3>Filter Section</h3>
    <p>Test will be print where</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>

You can also see here https://fiddle.jshell.net/user/sereno/fiddles/ several examples.