시작하기

npm install inko-pdf-sdk

host-server/
└─ pdfv/                  ← 이용자 서버에서 직접 제공하는 정적 자산
   ├─ index.html          ← 뷰어 본체 (iframe으로 로드됨)
   ├─ assets/             ← 뷰어 JS·CSS 번들
   └─ sdk/
      └─ inko-sdk.js      ← 호스트 페이지에서 로드하는 SDK 래퍼

<!-- npm의 sdk/inko-sdk.js를 아래 URL로 배포한 예 -->
<script src="/pdfv/sdk/inko-sdk.js"></script>

<div id="pdf-container" style="width:100%; height:80vh"></div>

<script>
  var viewer = Inko.mount('#pdf-container', {
    src: '/pdfv/index.html',          // 뷰어 본체 URL (필수)
    pdfUrl: '/files/document.pdf',    // 표시할 PDF
    fileName: 'document.pdf'
  });
</script>

<div id="pdf-container" style="width:100%; height:80vh"></div>
<script src="/pdfv/sdk/inko-sdk.js"></script>
<script>
  var viewer = Inko.mount('#pdf-container', {
    src: '/pdfv/index.html',
    pdfUrl: '/files/contract.pdf',
    fileName: 'contract.pdf',

    // 직전에 저장해 둔 버전이 있으면 그 지점부터 이어서 편집.
    // SAVED_CANVAS_DATA는 예시용 이름 — 호스트 서버가 페이지에 심어 주는 값입니다 (없으면 undefined)
    initialCanvasData: window.SAVED_CANVAS_DATA || undefined,

    onReady: function () {
      console.log('뷰어 준비 완료');
    },
    onSave: async function (canvasData, ok, msg) {
      if (!ok) { alert('저장 실패: ' + msg); return; }
      // ok는 SDK 직렬화 성공. 호스트 DB 저장 성공은 API 응답으로 확인합니다.
      var response = await fetch('/api/annotations', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ documentId: 'contract-123', baseVersion: 7, canvasData: canvasData })
      });
      if (!response.ok) throw new Error('저장 API 실패');
    },
    onError: function (err) {
      console.error('[Inko]', err);
    }
  });

  // 외부 버튼에서 저장 트리거도 가능
  // document.querySelector('#save-btn').onclick = function () { viewer.save(); };
</script>