JavaScript가 양식을 인쇄 할 때 수정 된 컨텐츠가 작동하지 않는 이유는 무엇입니까?

JavaScript 인쇄 양식 : 콘텐츠 업데이트 실패 문제 해결

JavaScript를 사용하여 양식을 인쇄 할 때, 때로는 텍스트 텍스트 텍스트 필드 및 확인란과 같은 양식 컨텐츠가 업데이트되는 문제가 발생하지만 인쇄 결과는 이전 값을 보여줍니다. 이 기사는이 문제의 원인을 분석하고 솔루션을 제공합니다.

문제 설명 :

사용자는 양식 (텍스트 및 확인란 확인 상태 포함)으로 컨텐츠를 입력하거나 수정하지만 출력 결과는 이러한 변경 사항을 반영하지 않습니다.

샘플 코드 (문제가 있음) :

<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) 사용하면 인쇄 된 양식 컨텐츠는 페이지에서 작성된 사용자의 수정을 정확하게 반영합니다. 인쇄 내용의 빈도를 피하기 위해 iframe 컨텐츠가로드 된 후 인쇄 작업이 수행되도록 setTimeout 기능이 추가되었습니다. 코드가 $ 기호를 사용하므로 코드에 jQuery 라이브러리를 소개하십시오. jQuery를 사용하지 않으면 원시 JavaScript 메소드를 사용하여 요소를 선택해야합니다.

위 내용은 JavaScript가 양식을 인쇄 할 때 수정 된 컨텐츠가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!