Html 网页打印功能不显示文本框值

Question

我已经在我的网页上的 div 中尝试了打印选项的代码。但它不显示在文本框中输入的值。请帮助我使用下面的代码，或者提供很好的参考来打印 div 值以及文本框中的值。

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

    <head>
        <title>10.1 Investment Portfolio Details</title>
        <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script>
            function printDiv(divName) {
                var inpText = document.getElementsByTagName("input")[0].value;
                var printContents = document.getElementById(divName).innerHTML;
                var originalContents = document.body.innerHTML;
                document.body.innerHTML = printContents;
                document.getElementsByTagName("input")[0].value = inpText;
                window.print();
                document.body.innerHTML = originalContents;
            }
        </script>
    </head>

    <body>
        <input type="button" onclick="printDiv('printableArea')" value="print" />
        <div id="printableArea">
             <h1 style="margin-top:7px; text-align:center;margin-left: 47px;">10 Assets Investment</h1>

            <table border="1" id="10.1" name="10.1" style="margin-top:-8px" class="colsumPortfolio">
                <tr style="background-color:#D8A455; border-top-color: white; border-style: hidden hidden groove;font-size: 24px;font-size: 24px;">
                    <td colspan=6 style="border-right-style: hidden; font-weight:bold;">10.1 Investment Portfolio Details</td>
                </tr>
                <tr>
                    <th>Particulars</th>
                    <th>Outstanding</th>
                    <th>Average</th>
                    <th>Interest & Dividend Earned</th>
                    <th>Income from sale of Investments</th>
                    <th>Yield</th>
                </tr>
                <tr>
                    <td>Investments to Total Assets Ratio</td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td>
                        <input type=text>
                    </td>
                </tr>
                <tr>
                    <th colspan="6" style="text-align: left;background: white;color: black">Investments in India USD</th>
                    <!-- <td class="tdright"><input type=text id="10.1_2_1" name="10.1_2_1" title="qry"></td>
    <td  class="tdright" ><input type=text id="10.1_2_2" name="10.1_2_2" title="qry"></td>
    <td  class="tdright" ><input type=text id="10.1_2_3" name="10.1_2_3" title="qry"></td>
    <td  class="tdright" ><input type=text id="10.1_2_4" name="10.1_2_4" title="qry"></td>
    <td><input type=text id="10.1_2_5" name="10.1_2_5" title="qry"></td> -->
                </tr>
                <tr class="totalcolor2">
                    <td>&nbsp; &nbsp; I. Government Securities</td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td>
                        <input type=text>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp; &nbsp; &nbsp; &nbsp; T-Bills</td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td>
                        <input type=text>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp; &nbsp; &nbsp; &nbsp; Central Government Securities</td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td>
                        <input type=text>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp; &nbsp; &nbsp; &nbsp; State Government Securities</td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td>
                        <input type=text>
                    </td>
                </tr>
                <tr class="totalcolor2">
                    <td>&nbsp; &nbsp; II. Other Approved Securities (as notified by RBI)</td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td class="tdright">
                        <input type=text>
                    </td>
                    <td>
                        <input type=text>
                    </td>
                </tr>
            </table>
        </div>
    </body>

</html>

Answer 1

我不知道你到底想实现什么，因为你的代码一团糟而且问题不清楚，我制作了这个片段，它将从 text field 中获取输入并将其打印在 div然后打开一个print pop-up。在您的代码中使用它。
**提示：** 给元素 id 并使用 getElementById() 而不是 getElementsByTagName()

function printInDiv()
{
  var text = document.getElementsByTagName('input')[0].value;
  document.getElementById('printable-Area').innerHTML = text;
  window.print();
}

#printable-Area
{
  width: 200px;
  height: 80px;
  background-color: red;
  position: absolute;
  top: 20%;
  left: 20%;
  font-size: 40px;
}

<input id = "inp" type = "text" placeholder = "Enter Text"></input>
<button onclick="printInDiv()"> Print </button>
<div id="printable-Area"></div>

Answer 2

我认为你正在尝试 print 具体 div
首先在你的代码中使用 document.getElementsByID() 和

在document.body.innerHTML = printContents;之前添加printcontents += inpText
像这样：

function printDiv(divName){
    var originalContents = document.body.innerHTML;
    var inpText = document.getElementsByTagName("input")[0].value;
    var printContents = document.getElementById(divName).innerHTML;
    printContents += inpText;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}

Html 网页打印功能不显示文本框值

Html webpage print function does not displaying text box values

html

printing

textbox