Question

如果我的帖子重复，请给我参考。
因为我找不到适合自己问题的帖子。

我有简单的表格

<div class="form-control" id="input">
    <label>Name :</label>
    <input type="text" name="name" id="name" autocomplete="off" required>
    <br><label>Class :</label>
    <select name="myclass" id="myclass" value="--">
        <option>--</option>
        <option>class 1</option>
        <option>class 2</option>
        <option>class 3</option>
    </select>
    <br><label>Date :</label>
    <input type="text" name="date" id="date" autocomplete="off" required>
</div>

<div>
    <button type="button" onclick="printInput()" >Submit Data</button>
</div>

所以，我在这里制作了简单的代码来生成我的表格到pdf：

<script src="dist/jspdf.min.js"></script>
<script src="dist/jspdf.plugin.autotable.js"></script>
<script src="lib/jquery.min.js"></script>
<script>
    function printInput()
    {
        var doc = new jsPDF();
        doc.fromHTML($("#input").get(0), 10, 10, {'width': 180});
        doc.output('dataurlnewwindow');
    }
</script>

但是，input和select的值未显示。

如何从pdf中显示它们的价值？

Answer 1

在日期和名称

周围添加div

<div class="form-control" id="input">
    <label><div id="NameHide">Name :</label>
    <input type="text" name="name" id="name" autocomplete="off" required>
    <br><label>Class :</label>
    <select name="myclass" id="myclass" value="--">
        <option>--</option>
        <option>class 1</option>
        <option>class 2</option>
        <option>class 3</option>
    </select>
    <br><label><div id="DateHide">Date :</label>
    <input type="text" name="date" id="date" autocomplete="off" required>
</div>

<div>
    <button type="button" onclick="printInput()" >Submit Data</button>
</div>

在剧本中

<script src="dist/jspdf.min.js"></script>
<script src="dist/jspdf.plugin.autotable.js"></script>
<script src="lib/jquery.min.js"></script>
<script>
    function printInput()
    {
document.getElementById("NameHide").innerHTML="Name"+document.getElementById("name").value;
document.getElementById("DateHide").innerHTML="Date"+document.getElementById("date").value;
        var doc = new jsPDF();
        doc.fromHTML($("#input").get(0), 10, 10, {'width': 180});
        doc.output('dataurlnewwindow');
document.getElementById("NameHide").innerHTML="Name";
document.getElementById("DateHide").innerHTML="Date";
    }
</script>

JSpdf尚未完全开发。所以我们需要编写自己的逻辑来从用户输入打印。此逻辑将附加值添加到html内容。然后呈现html并再次移除先前的附加。

Answer 2

您的代码似乎不够完整无法判断，但我认为您没有正确获得选择值！您刚刚选择了输入法。用jQuery选择如下的值：

name = $('input[name=name]').val();
class = $('select[name= myclass]').val();
date = $('select[name= date]').val();

或者在js中：

var x = document.getElementById("mySelect").value;

使用jspdf在输出html代码到pdf时显示输入值

2 个答案: