Question

我有这个简单的脚本，可以打印一部分网页。但是，它不会打印用户输入。

我的目标是只打印表格和用户输入；而不是网页的其余部分。

我不想使用CSS；只是js / jQuery和html。

我的问题是：如何打印包括用户输入在内的各种表单输入元素？

HTML：

<div id="print-content">
        <textarea>Print User Input</textarea>
        <input type="button" onclick="printDiv('print-content')" value="print a div!"/>
</div>

js：

<script type="text/javascript">
    function printDiv(divName) {
        var printContents = document.getElementById(divName).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
    }
</script>

Answer 1

输入的 current 值未在HTML中表示（仅 default 值），因此它不会显示在innerHTML中。

您将需要遍历原始页面中的所有输入，读取它们的value属性，然后将值复制到新页面上的新输入中。

最好使用CSS和@media print隐藏不想打印的元素，而不是用innerHTML多次重写文档。

Answer 2

尝试删除此行document.body.innerHTML = printContents;

function printDiv(divName) {
  var printContents = document.getElementById(divName).innerHTML;
  var originalContents = document.body.innerHTML;
  window.print();
}

<div id="print-content">
  <form>
    <textarea>Print User Input</textarea>
    <input type="button" onclick="printDiv('print-content')" value="print a div!" />
  </form>
</div>

Answer 3

仅在chrome上测试。

 function printDiv(divName) {

    var printContents = document.getElementById(divName).cloneNode(true);

    w = window.open();
    w.document.body.appendChild(printContents);
    w.print();
    w.close();
    return true;
}

打印带有textarea incl的div。使用js的用户输入

3 个答案: