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方法来选择元素。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
喜欢就支持一下吧
