콘텐츠로 건너뛰기
Capgo

시작하기

  1. 플러그인 설치

    Terminal window
    npm i @capgo/capacitor-pdf-generator

  2. 플랫폼 동기화

    Terminal window
    npx cap sync

HTML에서 생성

Section titled “HTML에서 생성”
import { PdfGenerator } from '@capgo/capacitor-pdf-generator';


const receiptHtml = `
  <html>
    <body>
      <h1>Capgo Store</h1>
      <p>구매해 주셔서 감사합니다.</p>
    </body>
  </html>
`;


const pdf = await PdfGenerator.fromData({
  data: receiptHtml,
  documentSize: 'A4',
  orientation: 'portrait',
  type: 'base64',
  fileName: 'receipt.pdf',
});


if (pdf.type === 'base64') {
  const link = document.createElement('a');
  link.href = `data:application/pdf;base64,${pdf.base64}`;
  link.download = 'receipt.pdf';
  link.click();
}

원격 URL 캡처

Section titled “원격 URL 캡처”
await PdfGenerator.fromURL({
  url: 'https://docs.capgo.app/invoice?id=123',
  orientation: 'landscape',
  documentSize: 'A4',
  type: 'share', // 네이티브 공유 대화 상자를 엽니다
  fileName: 'invoice-123.pdf',
});

팁

Section titled “팁”
  • HTML 문자열에 인라인 CSS를 포함하거나 상대 자산이 올바르게 해석되도록 baseUrl을 제공합니다.
  • 모바일에서 base64 데이터를 반환할 때는 공유하기 전에 파일 시스템(예: Capacitor Filesystem)으로 이동합니다.
  • landscape 방향은 넓은 테이블에 이상적이며, portrait는 대부분의 문서에 적합합니다.
  • 플랫폼 전반에서 일관된 렌더링을 위해 범위가 지정된 CSS 글꼴(예: 시스템 글꼴)을 사용하는 것을 고려하세요.