JavaScript打印表单：解决内容更新失效问题
使用JavaScript打印表单时，有时会遇到表单内容（例如textarea文本域和复选框）更新后，打印结果却显示旧值的问题。本文分析此问题的原因并提供解决方案。
问题描述：
用户在表单中输入或修改内容（包括文本和复选框选中状态），但打印输出的结果并未反映这些更改。
示例代码（存在问题）：
立即学习“Java免费学习笔记（深入）”；
<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方法来选择元素。
