单击按钮时,文本字段值未显示在下载pdf中

时间:2018-07-14 14:52:16

标签: javascript jquery html jspdf

我是新手。我最终可以将文档另存为pdf,但是问题是我输入的文本字段中的文本未显示在我下载的pdf文件中。这是我的代码。

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');    
   });

这是下载pdf的屏幕截图。我想显示我在此pdf文件中输入的文本。但问题是它只能给我提供内容

Save.pdf

1 个答案:

答案 0 :(得分:1)

请尝试此代码

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>

尝试此js代码

$('#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');
});