Question

我有以下代码

＆＃13;

function printDiv(divName) {
  var printContents = document.getElementById(divName).innerHTML;
  var originalContents = document.body.innerHTML;

  document.body.innerHTML = printContents;

  window.print();

  document.body.innerHTML = originalContents;
}

function sync() {
  var n1 = document.getElementById('n1');
  var n2 = document.getElementById('n2');
  n2.value = n1.value;
}

＆＃13;

@page {
  size: auto;
  margin: 0mm;
}

@media print {
  #print {
    display: block
  }
  ;
}

＆＃13;

<div id="printableArea">
  <label id="l1">Name</label>
  <input type="text" name="n1" id="n1" onkeyup="sync()">
  <input type="text" name="n2" id="n2" />

</div>
<input type="button" onclick="printDiv('printableArea')" value="Print!" class="button" />

＆＃13;

当我尝试在文本框中打印值时，只会显示空白页面，但同一页面的输入字段的预定义文本（此处为日期字段）将照常打印。

我如何更改javascript函数以便打印输入字段的文本还有什么方法可以在文本框中打印值？

Answer 1

属性.innerHtml不会序列化任何表单或读取任何输入值。实际上输入值是DOM属性，与HTML无关。

如果要读取输入值，其中一种方法是明确读取它。

function printDiv() {
 const n1 = document.querySelector("#n1").value;
  const n2 = document.querySelector("#n2").value;
 const content = `N1 : ${n1} <br/>N2 : ${n2}`
 document.body.innerHTML = content;

 window.print();

 document.body.innerHTML = originalContents;
 }

如果您想使用任何表单序列化程序，可能需要检查一下：https://www.npmjs.com/package/form-serialize

例如：

const form = document.querySelector("#person");
const data = serialize(form);

Answer 2

您的代码实际上没有任何问题。

首先尝试在

打印期间隐藏正文内容

@media print {
body {display:none};
}

这就是为什么它在打印过程中不显示任何内容。

第二件事，function printDiv()没有必要，因为浏览器已经为你打印内容了。要通过点击按钮调用浏览器进行打印，只需添加<input type="button" onclick="window.print();" value="Print!" class="button" />即可。

因此，您的代码应如下所示：

   <html>
    <title>gg</title>
    <style>
    @page { size: auto;  margin: 0mm; }
    @media print {
    /*body {display:none};*/
    }
    </style>
    <script>
    /* Removed */
    // function printDiv() {
    //  var printContents = document.getElementById(divName).innerHTML;
    //  var originalContents = document.body.innerHTML;

    //  document.body.innerHTML = printContents;

    //  window.print();

    //  document.body.innerHTML = originalContents;
    //  }
     </script>
     <body>
     <script>
     function sync()
     {
     var n1 = document.getElementById('n1');
     var n2 = document.getElementById('n2');
     n2.value = n1.value;
     }
    </script>
    <div id="printableArea">
    <label id="l1">Name</label>
    <input type="text" name="n1" id="n1" onkeyup="sync()">
    <input type="text" name="n2" id="n2"/> 
    </div>
    <input type="button" onclick="window.print();"  value="Print!" 
    class="button" />
    </body>
     </html>

希望它有所帮助，如果您需要更多信息，请告诉我。谢谢！

Answer 3

<html>
<head>
    <title>code</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        function print(divId) {
            var content = document.getElementById(divId).innerHTML;
            var mywindow = window.open('', 'Print', 'height=600,width=800');

            mywindow.document.write('<html><body>');
            mywindow.document.write(content);
            mywindow.document.write('</body></html>');

            mywindow.document.close();
            mywindow.focus();
            mywindow.print();
            mywindow.close();
            return true;
        }
    </script>
    <script type="text/javascript">
        function alm() {
            var typed = document.getElementById("inval").value;
            document.getElementById("outval").innerHTML = typed;
            document.getElementById("outval2").innerHTML=typed;
        }
    </script>
    <div>TODO write content</div>
    <div id="ppp">

        <div id='outval'></div>
        <br>
        <h1>hi hi</h1>
        <div id='outval2'></div>
        <br>


    </div>
    <input type='text' id='inval' onkeyup="alm()">
    <br/>
    <input type="button"  value="click" onclick="print('ppp');">

</body>
</html>

Answer 4

我遇到了同样的问题，但现在我不能打印两页以上。可打印的文件应该是3页，但它会在第二页的末尾中断。任何想法？这是我的理由 window.print() issue in angularJs

Answer 5

您需要更改DOM属性值：

<input type="text" onchange="this.setAttribute('value', this.value)" style="border: none transparent;outline: none;" value="" >

使用打印窗口时输入文本无法打印

5 个答案: