사전 요소의 PDF 내보내기에서 CSS 스타일을 유지하는 방법은 무엇입니까?

사전 요소의 PDF 내보내기에서 CSS 스타일 유지

강조 표시된 코드를 PDF로 저장하는 옵션을 제공하는 구문 강조 표시 시나리오에서 CSS 스타일을 유지합니다. 강조 표시된 코드의 미학과 기능을 유지하는 것이 중요합니다.

CSS를 사용하여 사전 요소를 PDF로 저장

CSS 스타일을 유지하면서 사전 요소를 PDF로 저장하려면 다음 접근 방식을 고려하세요. :

1. 새 창 만들기: 새 브라우저 창을 엽니다.
2. HTML 및 스타일 추가: 이전 창의 HTML을 삽입합니다. 관련 스타일을 포함한 요소를 새 창의 문서 본문에 추가합니다.
3. 초점 및 인쇄: 새 창에 초점을 맞추고 인쇄 프로세스를 시작합니다.
4. 시스템 인쇄 대화 상자: 시스템 인쇄 대화 상자에서 "파일로 인쇄" 옵션을 선택하여 강조 표시된 코드를 PDF로 저장합니다.

코드 예

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

구현 고려 사항

• 스타일 변수에 스타일 요소 또는 pre 요소와 관련된 인라인 스타일 정보가 포함되어 있는지 확인하세요.
• 최적의 형식을 보장하기 위해 필요에 따라 CSS 미디어 쿼리를 조정하세요.

결론

이러한 기술을 구현하면 CSS 스타일을 유지하면서 사전 요소를 PDF로 효과적으로 저장할 수 있으므로 사용자는 강조 표시된 코드를 다음과 같이 쉽게 공유하고 보관할 수 있습니다. 정확한 프리젠테이션.

위 내용은 사전 요소의 PDF 내보내기에서 CSS 스타일을 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!