jspdfを使用してhtmlコードをpdfにエクスポートする際の入力値を表示

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に私のフォームを生成するための簡単なコードを作成していますinputとselectから

<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> 

しかし、値が表示されません。

どのようにpdfでそれらから値を作るか？

Answer 1

あなたのコードが判断するのに十分ではないようですが、私はあなたが正しく選択値を得ていないと思います！あなたは入力テージを選択しました。 JSで交互に

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

：

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

Answer 2

日の周りの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 jQueryを使って は、このような値を選択しますnまだ完全に開発されていません。だから、ユーザー入力から印刷するために独自のロジックを書く必要があります。 このロジックは、htmlコンテンツに値を追加しています。 htmlをレンダリングし、前の追加をもう一度削除します。