Starlight를 PDF로 변환: 경험과 통찰력

당신에게 일주일 안에 새로운 문서 웹사이트를 만드는 임무가 주어졌다고 상상해보세요. 시각적으로 매력적이고, 빠르고, 탐색하기 쉬워야 합니다. "완료하세요"라는 지시가 포함된 *.docs 파일, 이미지, 스크린샷 더미를 받게 됩니다.

Docusaurus, Nextra, VitePress, Docus 등 선택할 수 있는 훌륭한 도구가 많이 있습니다. 이전에 나는 Starlight를 사용하여 문서 웹 사이트를 구축한 훌륭한 경험이 있었기 때문에 이 작업을 위해 Starlight를 선택했습니다. 그러나 나는 누락된 기능, 즉 문서에서 PDF를 생성하는 기능을 발견했습니다. 그리고 그것은 요구 사항 중 하나였습니다. "좋은 사이드 프로젝트 같군요" 속으로 생각했습니다.

작업 처리

처음에는 간단해 보였습니다. 페이지를 가져오고, HTML을 구문 분석하고, 콘텐츠를 그룹화하면 짜잔!

Starlight 기반 웹사이트에는 문서를 탐색할 수 있는 다음 버튼이 있습니다. PDF는 기본적으로 페이지 배열이므로 다음 버튼을 사용하여 페이지를 하나씩 구문 분석하는 것이 논리적인 것처럼 보였습니다. 웹사이트는 정적 페이지를 생성하기 때문에 HTML을 가져오고, 필요한 부분을 쿼리하고, 모든 것을 결합하는 스크립트를 빠르게 작성했습니다. 그러나 웹 사이트의 스타일을 유지하는 PDF를 생성하는 것은 더 복잡한 것으로 나타났습니다. 몇 가지 브레인스토밍 끝에 Puppeteer가 최고의 솔루션이라는 것을 깨달았습니다.

이제 프로세스가 명확해졌습니다.

1. 시작 페이지를 확인하세요. 다음 버튼이 있는 첫 번째 페이지입니다.
2. 페이지를 탐색합니다. 각 페이지에서 제목과 주요 내용을 추출하는 동시에 목차를 구성합니다.
3. 콘텐츠를 결합하세요. 페이지 나누기와 추가 스타일을 추가하세요.
4. 최종 HTML을 준비합니다. 결과 HTML이 포함된 초기 페이지
5. 리소스를 로드하세요. 모든 이미지를 로드하려면 페이지를 맨 아래로 스크롤하세요.
6. PDF를 생성합니다. Puppeteer's Page.pdf() 메소드를 사용하면 됩니다.
7. 완료!

이것이 starlight-to-pdf의 작동 방식입니다. 이 패턴을 따르면 PDF 내보내기 기능이 없는 다른 문서 프레임워크를 위한 유사한 도구를 구축할 수 있습니다.

다음 단계

기본 기능이 준비되었으면 이제 몇 가지 추가 기능을 추가할 차례였습니다. 다음은 가장 흥미롭고 도전적인 기능입니다.

머리글 및 바닥글 추가

머리글이나 바닥글에 페이지 번호와 몇 가지 추가 정보를 추가하는 것이 좋습니다. Puppeteer의 Page.pdf() 메서드는 headerTemplate 및 footerTemplate 옵션을 허용합니다. 이 옵션은 HTML 문자열을 허용합니다. Puppeteer는 특정 유틸리티 클래스가 있는 요소에 자동으로 값을 주입합니다.

• .date: 형식화된 날짜;
• .title: 웹페이지의 태그값;
• .url: 인쇄 기능이 호출된 페이지의 URL;
• .pageNumber: 현재 페이지 번호;
• .totalPages: 문서의 총 페이지 수.

인쇄하기 전에 모든 내용을 한 페이지에 결합하므로 제목과 URL은 우리에게 큰 가치가 없습니다. 삽입된 값은 항상 동일하게 유지됩니다. 하지만 다른 수업도 도움이 많이 됩니다. 바닥글 템플릿의 예는 다음과 같습니다.

<style>
  .footer-container {
    --color: #000;

    display: flex;
    align-items: center;
    justify-content: space-between;
    border-block-start: 1px solid var(--color);
    color: var(--color);
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    margin-inline: 1.5cm 1cm;
    padding-block: 0.25cm 0.5cm;
    width: 100%;
  }
</style>

<div>



<p>To use this, do not forget to set the displayHeaderFooter property to true:<br>
</p>

<pre class="brush:php;toolbar:false">import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://someUrl');

const footerTemplateStr = '<style>...<style><div>...</style>