Paged.js를 사용하여 웹 기반 도큐멘트를 PDF로 변환할 수 있는 데모 프로젝트입니다.

• Paged.js 통합: 웹 표준 CSS를 사용한 고품질 PDF 생성
• 반응형 디자인: 화면과 인쇄 모두 최적화된 레이아웃
• 자동 목차: 섹션 기반 자동 목차 생성
• 페이지 헤더/푸터: 자동 페이지 번호 및 헤더 정보
• 프린트 최적화: CSS 페이지 브레이크 제어
• 미리보기 모드: 실시간 인쇄 미리보기

pagedjs-demo/
├── index.html          # 메인 HTML 파일
├── css/
│   ├── style.css       # 화면 표시용 스타일
│   └── print.css       # Paged.js 인쇄 스타일
├── js/
│   └── script.js       # JavaScript 로직
├── package.json        # npm 설정
└── README.md          # 프로젝트 문서

npm install

npm run dev

브라우저에서 http://localhost:3000으로 접속하면 데모를 확인할 수 있습니다.

npm run serve

1. 웹 브라우저에서 index.html 파일을 엽니다
2. 우측 상단의 "PDF로 저장" 버튼을 클릭합니다
3. 브라우저의 인쇄 대화상자에서 "PDF로 저장"을 선택합니다

• "미리보기 토글" 버튼을 클릭하여 Paged.js 렌더링 결과를 확인할 수 있습니다
• 미리보기 모드에서는 실제 PDF와 동일한 페이지 레이아웃을 볼 수 있습니다

css/print.css 파일에서 @page 규칙을 수정하여 페이지 설정을 변경할 수 있습니다:

@page {
    size: A4;                    /* 페이지 크기 */
    margin: 20mm 15mm;          /* 여백 설정 */
    
    @top-center {
        content: "문서 제목";     /* 헤더 내용 */
    }
    
    @bottom-center {
        content: counter(page);   /* 페이지 번호 */
    }
}

index.html 파일의 <article class="document"> 섹션 내에서 콘텐츠를 수정할 수 있습니다.

• css/style.css: 화면 표시용 스타일
• css/print.css: 인쇄/PDF용 스타일

CSS를 사용하여 페이지 브레이크를 제어할 수 있습니다:

.no-break {
    break-inside: avoid;        /* 요소 내부에서 페이지 브레이크 방지 */
    page-break-inside: avoid;
}

.page-break-before {
    break-before: page;         /* 요소 앞에서 페이지 브레이크 강제 */
    page-break-before: always;
}

js/script.js에서 Paged.js 이벤트를 처리할 수 있습니다:

class CustomHandler extends Paged.Handler {
    beforeParsed(content) {
        // 파싱 전 처리
    }
    
    afterRendered(pages) {
        // 렌더링 후 처리
    }
}

Paged.registerHandlers(CustomHandler);

• Chrome/Chromium 기반 브라우저 (권장)
• Firefox
• Safari
• Edge

참고: 최상의 PDF 생성 품질을 위해 Chrome 브라우저 사용을 권장합니다.

• Paged.js 공식 문서
• CSS Paged Media 사양
• CSS 인쇄 스타일 가이드

1. 이 저장소를 포크합니다
2. 새로운 기능 브랜치를 생성합니다 (git checkout -b feature/new-feature)
3. 변경사항을 커밋합니다 (git commit -am 'Add new feature')
4. 브랜치에 푸시합니다 (git push origin feature/new-feature)
5. Pull Request를 생성합니다

이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.

버그나 기능 요청이 있으시면 Issues 페이지에서 신고해 주세요.

Made with ❤️ using Paged.js