Why does the modified content fail to work when JavaScript prints a form?

JavaScript print form: Solve the problem of content update failure

When printing forms using JavaScript, sometimes you will encounter the problem that the form content (such as textarea text fields and check boxes) is updated, but the print result shows the old value. This article analyzes the causes of this problem and provides solutions.

Problem description:

Users enter or modify content in the form (including text and checkbox check status), but the results of the printout do not reflect these changes.

Sample code (there is a problem):

<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>Right position</label>
    <label>External slant</label>
    <label>Inner slant</label>
    <label>Outer hidden oblique</label>
    <label>Implicit oblique</label>
  </div>
</div>
<button id="dw">Click me to print</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>

Cause of the problem:

The original code uses outerHTML to get the HTML content of the form element. This method only gets the static HTML structure of the element and does not contain dynamically updated form values.

Solution:

Use cloneNode(true) method to clone the form element. cloneNode(true) copies the element and all its child nodes and attributes, including the current value of the form element.

Improved code:

<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>Right position</label>
    <label>External slant</label>
    <label>Inner slant</label>
    <label>Outer hidden oblique</label>
    <label>Implicit oblique</label>
  </div>
</div>
<button id="dw">Click me to print</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>

By using cloneNode(true) , the printed form content will accurately reflect the user's modifications made on the page. The setTimeout function has been added to ensure that the print operation is performed after the iframe content is loaded to avoid the blankness of the print content. Make sure you introduce the jQuery library in your code because the code uses the $ symbol. If jQuery is not used, you need to use native JavaScript methods to select elements.

The above is the detailed content of Why does the modified content fail to work when JavaScript prints a form?. For more information, please follow other related articles on the PHP Chinese website!