单击按钮时，文本字段值未显示在下载的 pdf 中答案

【问题标题】：Text Field value not displaying in the download pdf when clicking the button单击按钮时，文本字段值未显示在下载的 pdf 中
【发布时间】：2018-07-16 00:33:45
【问题描述】：

我是新手。我终于可以将我的文档保存为 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 文件中输入的文本。但问题是它只给我那个内容

【问题讨论】：

var chars=$('try1').val(); 到 var chars=$('#try1').val();
我已经尝试过了，但问题是它不再下载 pdf
检查开发者控制台中的其他错误。如果您正在考虑添加# 导致下载错误，那么您应该阅读JQUERY
它现在正在下载我的意思是 pdf，但我输入的文本仍然没有显示在 pdf 中
查看link 或live test

标签： javascript jquery html jspdf

【解决方案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');
});

【讨论】：

非常感谢先生，现在我终于看到了我在文本框中输入的输入。真的谢谢你:)
但是先生，为什么
div 没有出现在保存的 pdf 中。谢谢您的帮助。真的很感激。
因为你用你输入的文本替换了print部分的内容
谢谢先生。但是是否可以同时显示我输入的段落和文本？真的谢谢你，先生
非常感谢先生。真的很谢谢你。先生，你帮了大忙。真的谢谢你:)