為什麼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">

<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中文網其他相關文章！