Text Field value not displaying in the download pdf when clicking the button

Question

I'm a newbie. I can finally save my document as a pdf but the problem is the text in the textfield that i input was not display in the pdf file that i download. Here is my code.

HTML

<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>How To Download a DIV in a HTML Page as PDF File Using JavaScript</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
</head>

<body>
    <!-- Content Area -->
    <div id="print">

        <h3>Welcome To Veewom</h3>
        <p>This is a Sample Pararaph</p>
        <input type="text" id="try1" placeholder="Enter Name Here">



    </div>

    <div id="print-btn"></div>
    <button id="submit">Download PDF File</button>

</body>

</html>

JAVASCRIPT

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

$('#submit').click(function () {
    var fieldId = "field100";
    var chars = $('#try1').val();
    var chars2 = $('#try2').val();
    var chars3 = $('#try3').val();
    var d3 = $('[name=' + fieldId + ']:enabled').val();

    diff1 = "";
    if (d3) {
        diff = d3;
    }


    $('#veewom').html('<b>'+"One"+":"+'</b>'+ chars+
                '<b>'+"Two"+":"+'</b>'+chars2+
                '<b>'+"Three"+":"+'</b>'+chars3
                );

    var source = $('#print').html();
    doc.fromHTML(source, 15, 15, {
      'width': 170,
        'elementHandlers': specialElementHandlers
  });
     doc.save('pdf-version.pdf');    
   });

This is the screenshot of the download pdf. I want to display the text that i input in this pdf file. but the problem is its only give me that content

`var chars=$('try1').val();` to `var chars=$('#try1').val();` — Empty Brain, Jul 14 '18 at 14:57
i already try that but the problem is it is not download anymore the pdf — Dens B, Jul 14 '18 at 15:12
Check the other errors in the developer console. If you are thinking of adding a `#` cause error in downloading then you should read [JQUERY](https://www.w3schools.com/Jquery/default.asp) — Empty Brain, Jul 14 '18 at 15:17
It is now downloading i mean the pdf but still the text that i input still not displaying in the pdf — Dens B, Jul 14 '18 at 15:20
check it [link](https://stackoverflow.com/questions/16858954/how-to-properly-use-jspdf-library) or [live test](https://rawgit.com/MrRio/jsPDF/master/) — Empty Brain, Jul 14 '18 at 15:21
it is now saving pdf but still the text that i input in the textfield is not displaying in the save pdf — Dens B, Jul 14 '18 at 15:24

Empty Brain · Accepted Answer · 2018-07-14T16:08:52.337

1

TRY THIS CODE

HTML

<input type="text" id="try1" placeholder="Enter Name Here">
<div id="print">
    <h3>Welcome To Veewom</h3>
    <p>This is a Sample Pararaph</p>
    <p id="veewom"></p>
</div>

Try this js code

$('#submit').click(function () {
  var fieldId = "field100";
  var chars = $('#try1').val();
  $('#veewom').html(chars);
  var d3 = $('[name=' + fieldId + ']:enabled').val();

  diff1 = "";
  if (d3) {
    diff = d3;
  }

  var source = $('#print').html();
  doc.fromHTML(source, 15, 15, {
    'width': 170,
    'elementHandlers': specialElementHandlers
  });
  doc.save('pdf-version.pdf');
});

edited Jul 14 '18 at 16:08

answered Jul 14 '18 at 15:49

Empty Brain

627
8
24

Thank you very much sir now i finally see the input that i type in the textbox sir. Really Thank youuu :) – Dens B Jul 14 '18 at 15:57
But sir why is it that the
div not appear in the save pdf. Thank you for your help. really appreciate it.
– Dens B Jul 14 '18 at 15:59
Cause you are replacing the content of `print` section with you input text – Empty Brain Jul 14 '18 at 16:03
Thank you sir. But is it possible to display both paragraph and the text that i input sir ? really thank you sir – Dens B Jul 14 '18 at 16:09
Thank you so much Sir. Really Thank you. You been a great help sir. Really Thank you :) – Dens B Jul 14 '18 at 16:15
Sir can i ask? How can i add tab and spaces when saving in pdf file? – Dens B Jul 15 '18 at 16:27
I updated my code sir i want to add new line and tab spaces when saving in pdf. Please help sir. Thank you – Dens B Jul 15 '18 at 16:34

Text Field value not displaying in the download pdf when clicking the button

1 Answers1