为什么JavaScript打印表单时，修改后的内容不起效？

JavaScript打印表单：解决内容更新失效问题

使用JavaScript打印表单时，有时会遇到表单内容（例如textarea文本域和复选框）更新后，打印结果却显示旧值的问题。本文分析此问题的原因并提供解决方案。

问题描述：

用户在表单中输入或修改内容（包括文本和复选框选中状态），但打印输出的结果并未反映这些更改。

示例代码（存在问题）：

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<div id="divKanZhengPanel-binli">
  <div class="checkDiv">
    <label>正位</label>
    <label>外显斜</label>
    <label>内显斜</label>
    <label>外隐斜</label>
    <label>内隐斜</label>
  </div>
</div>
<button id="dw">点我打印</button>

<script>
  document.getElementById('dw').addEventListener('click', function() {
    let docHtml1 = $("#divKanZhengPanel-binli").prop("outerHTML");
    $('#print-iframe').remove(); 
    let iframe1 = document.createElement('IFRAME');
    let doc1 = null;
    iframe1.id = "print-iframe";
    iframe1.style = 'position:absolute;width:0px;height:0px;left:-0px;top:-0px;visibility: auto;';
    document.body.appendChild(iframe1);
    doc1 = iframe1.contentWindow.document;
    doc1.write(docHtml1);
    doc1.close();
    iframe1.contentWindow.focus();
    iframe1.contentWindow.print();
  })
</script>

问题原因：

原代码使用outerHTML获取表单元素的HTML内容。此方法只获取元素的静态HTML结构，不会包含动态更新后的表单值。

解决方案：

使用cloneNode(true)方法克隆表单元素。cloneNode(true)会复制元素及其所有子节点和属性，包括表单元素的当前值。

改进后的代码：

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<div id="divKanZhengPanel-binli">
  <div class="checkDiv">
    <label>正位</label>
    <label>外显斜</label>
    <label>内显斜</label>
    <label>外隐斜</label>
    <label>内隐斜</label>
  </div>
</div>
<button id="dw">点我打印</button>

<script>
  document.getElementById('dw').addEventListener('click', function() {
    $('#print-iframe').remove(); 
    let iframe1 = document.createElement('IFRAME');
    let doc1 = null;
    iframe1.id = "print-iframe";
    iframe1.style = 'position:absolute;width:0px;height:0px;left:-0px;top:-0px;visibility: auto;';
    document.body.appendChild(iframe1);
    setTimeout(function() { // 使用setTimeout确保iframe加载完成
      doc1 = iframe1.contentWindow.document;
      doc1.body.appendChild(document.querySelector('#divKanZhengPanel-binli').cloneNode(true));
      doc1.close();
      iframe1.contentWindow.focus();
      iframe1.contentWindow.print();
    });
  })
</script>

通过使用cloneNode(true)，打印出的表单内容将准确反映用户在页面上进行的修改。 添加了setTimeout函数，确保在iframe内容加载完成后再执行打印操作，避免出现打印内容为空白的情况。 请确保你的代码中引入了jQuery库，因为代码使用了$符号。如果未使用jQuery，则需要使用原生JavaScript方法来选择元素。

以上是为什么JavaScript打印表单时，修改后的内容不起效？的详细内容。更多信息请关注PHP中文网其他相关文章！