解決JavaScript表單打印內容不更新的問題
使用JavaScript打印網頁表單時，有時會發現用戶修改后的內容并未體現在打印預覽中。這是因為直接獲取表單html（例如使用.prop(“outerHTML”)）無法捕捉到實時用戶輸入。 例如，文本框內容或復選框狀態可能無法正確反映。
問題在于，直接獲取HTML并不能實時更新動態修改的內容。為了解決這個問題，需要使用cloneNode(true)方法克隆表單節點，確?？寺〉墓濣c包含所有最新的用戶輸入和狀態變化。
以下是一個改進后的代碼示例，演示如何使用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
喜歡就支持一下吧
相關推薦
