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

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

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

사전 요소를 PDF의 CSS 스타일을 유지하면서 다음 접근 방식을 고려하십시오.

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

코드 예

$("#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();
});

구현 고려 사항

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

결론

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