使用 textarea 打印 div，包括。使用js的用户输入

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