\'pre\' 요소를 PDF로 저장할 때 CSS 스타일을 유지하는 방법은 무엇입니까?

'pre' 요소를 PDF로 저장할 때 CSS 스타일 유지

PDF 저장 기능으로 구문 강조 기능을 확장하려는 과정에서 매우 중요한 것은 종종 간과되는 측면은 CSS 스타일의 보존입니다. 기존 접근 방식에서는 중요한 스타일 정보가 없는 PDF가 생성될 수 있지만 CSS 속성의 충실한 전송을 보장하는 솔루션이 있습니다.

질의에 대답하려면 웹 탐색 기능의 조합을 활용하는 것이 핵심입니다. 새 브라우저 창을 동적으로 생성하고 필요한 HTML 및 CSS 요소를 추가하고 인쇄 기능을 호출함으로써 일반적인 PDF 생성 방법에 따른 제한을 피할 수 있습니다.

다음 코드 조각은 이 접근 방식을 보여줍니다.

<code class="javascript">$("#save").click(function() {
  var text = $("#output")[0].outerHTML;
  var styles = $("style")[0].outerHTML;
  var popup = window.open("", "popup");
  popup.document.body.innerHTML = text + styles;
  popup.focus();
  popup.print();
});</code>

이 코드에서 클릭 핸들러는 CSS 요소의 스타일 정보와 함께 'pre' 요소의 HTML 콘텐츠를 캡처합니다. 새로운 팝업 창이 생성되고 결합된 HTML 및 CSS 요소가 해당 본문에 추가됩니다. 팝업 창에서 .focus() 및 .print()를 호출하여 시스템의 인쇄 기능을 트리거하고 인쇄 대화 상자를 엽니다. "파일로 인쇄"를 선택하면 원본 CSS 스타일을 모두 그대로 유지하면서 출력물을 PDF로 저장할 수 있습니다.

위 내용은 \'pre\' 요소를 PDF로 저장할 때 CSS 스타일을 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!