为什么使用JavaScript打印表单时，某些修改的内容不生效？-小浪学习网

为什么使用JavaScript打印表单时，某些修改的内容不生效？

解决JavaScript表单打印内容不更新的问题

使用JavaScript打印网页表单时，有时会发现用户修改后的内容并未体现在打印预览中。这是因为直接获取表单html（例如使用.prop(“outerHTML”)）无法捕捉到实时用户输入。例如，文本框内容或复选框状态可能无法正确反映。

问题在于，直接获取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>         <div class="checkDiv">             <label>正位</label>             <label>外显斜</label>             <label>内显斜</label>             <label>外隐斜</label>             <label>内隐斜</label>         </div>     </div> </div> <button id="dw">点我打印</button>  <script>     document.getElementById('dw').addEventListener('click', function() {         $('#print-iframe').remove(); // 清除之前的iframe         let iframe = document.createElement('iframe');         iframe.id = 'print-iframe';         iframe.style.cssText = 'position:absolute;width:0px;height:0px;left:-0px;top:-0px;visibility:hidden;';         document.body.appendChild(iframe);          let doc = iframe.contentWindow.document;         doc.open();         doc.write('<html><head><title>打印预览</title></head><body>');         doc.body.appendChild(document.querySelector('#divKanZhengPanel-binli').cloneNode(true));         doc.write('</body></html>');         doc.close();          iframe.contentWindow.focus();         iframe.contentWindow.print();     }); </script>

使用此代码，打印预览将准确显示用户在文本框和复选框中所做的所有修改，确保打印内容与页面显示内容一致。

立即学习“Java免费学习笔记（深入）”；

打印效果: 用户在页面上的所有输入和选择都将正确地显示在打印预览中。

以上就是

文章版权归作者所有，未经允许请勿转载。

THE END