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>...</div>' // replace with the HTML string from the example above
await page.pdf({
    displayHeaderFooter: true,
    footerTemplate: footerTemplateStr
})

다음은 명심해야 할 몇 가지 결과입니다.

• 템플릿은 유효한 HTML 구조여야 합니다.
• Puppeteer의 기본값은 0이므로 글꼴 크기 CSS 속성을 정의합니다.
• 인라인 <스타일> 사용 스타일을 정의하는 태그입니다. 템플릿 내에서는 웹사이트 스타일을 사용할 수 없습니다.
• 이미지는 base64 문자열로 인코딩되어야 합니다.
• Puppeteer의 여백 옵션을 사용하여 원하는 레이아웃을 얻으세요.

CLI 스타일은 어떻습니까?

모든 것이 잘 작동하고 결과 PDF도 훌륭해 보이지만 터미널 메시지가 단조로운 느낌입니다. 세부 사항에 대한 관심은 좋은 것과 위대한 것을 분리하는 것입니다. 그렇지 않습니까? 메시지를 더욱 다채롭고 읽기 쉽게 만들어 보겠습니다.

ANSI 이스케이프 시퀀스의 마법이 여기에 있습니다. 나는 4비트 색상이면 작업에 충분하다고 결정했습니다. 빨간색 배경에 흰색 텍스트를 갖고 싶다고 가정해 보겠습니다(이것이 제가 [ERROR]: 오류 메시지 앞의 접두사에 사용한 것입니다). 이 모양을 얻는 방법은 다음과 같습니다.

console.log('\x1b[37;41m', 'White on red message');

분석해 보겠습니다.

• x1b[는 16진수 이스케이프 코드입니다(유니코드 대안으로 u001b를 사용할 수도 있습니다);
• 37은 전경 흰색이며, 3은 전경, 7은 흰색을 나타냅니다.
• 41은 배경색 빨간색으로, 4는 배경, 1은 빨간색을 의미합니다.

모든 것이 작동하지만 이제 모든 console.log() 출력의 스타일이 이 방식으로 지정됩니다. 스타일을 다시 기본값으로 재설정하려면 끝에 재설정 시퀀스 x1b[0m을 추가하기만 하면 됩니다.

console.log('\x1b[37;41m', 'White on red message', '\x1b[0m');

훨씬 나아졌습니다. 회색 배경에 굵은 청록색 텍스트를 원하는 경우(4비트 색상 이름의 밝은 검정색)? 쉽습니다:

console.log('\x1b[1;36;100m', 'Cyan on gray message in bold', '\x1b[0m');

각 부분의 역할은 다음과 같습니다.

• 이스케이프 코드 뒤의 1은 굵은 효과를 적용합니다.
• 36은 텍스트 색상을 청록색으로 설정합니다.
• 100은 배경을 밝은 검정색으로 변경합니다. 여기서 10은 밝다를 의미하고 0은 검정색을 의미합니다.

이 지식을 활용하면 CLI 도구를 시각적으로 매력적으로 만들 수 있습니다. 예를 들어, 저는 프로젝트에서 모든 URL과 파일 경로를 밑줄이 그어진 파란색 텍스트로 지정했습니다.

console.log('\x1b[4;34m', './underlined/blue', '\x1b[0m')

해당 주제에 대해 자세히 알아보려면 이 치트시트를 확인하세요.

마무리

언제 일상적인 작업이 보람 있는 사이드 프로젝트에 영감을 줄지 알 수 없습니다. starlight-to-pdf 개발은 Puppeteer 및 CLI 스타일링에 대한 귀중한 경험을 제공했으며 오픈 소스 커뮤니티에 새로운 도구가 등장했습니다. 간단한 데모는 다음과 같습니다.

위 내용은 Starlight를 PDF로 변환: 경험과 통찰력의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!