JavaScriptがフォームを印刷するときに、変更されたコンテンツが機能しないのはなぜですか？

JavaScript印刷フォーム：コンテンツの更新失敗の問題を解決する

JavaScriptを使用してフォームを印刷すると、フォームコンテンツ（TextArea Textフィールドやチェックボックスなど）が更新されるという問題に遭遇する場合がありますが、印刷の結果は古い値を示しています。この記事では、この問題の原因を分析し、解決策を提供します。

問題の説明：

ユーザーはフォームでコンテンツを入力または変更します（テキストとチェックボックスのチェックステータスを含む）が、印刷の結果はこれらの変更を反映していません。

サンプルコード（問題があります）：

<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>書類</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 中国語 Web サイトの他の関連記事を参照してください。