핵심 가이드

PDF 불러오기

PDF는 마운트 시점에 옵션으로 지정하거나, 마운트 이후 메서드로 교체할 수 있습니다. 두 경우 모두 URL 방식과 Base64 방식을 지원합니다.

마운트 시 불러오기

URL로 불러오기 — pdfUrl

가장 일반적인 방식입니다. 뷰어가 해당 URL에서 PDF를 직접 내려받아 렌더링합니다.

URL 로드 js

var viewer = Inko.mount('#pdf-container', {
  src: '/pdfv/index.html',
  pdfUrl: '/files/document.pdf',   // 서버에서 접근 가능한 PDF URL
  fileName: 'document.pdf'         // 뷰어에 표시할 파일명 (선택)
});

pdfUrl의 접근 주체는 브라우저입니다

PDF 요청은 뷰어 iframe(사용자 브라우저)에서 발생합니다. 인증이 걸린 URL이라면 세션 쿠키가 함께 전송되도록 같은 도메인 경로를 사용하는 것이 가장 간단합니다. 다른 도메인의 PDF는 해당 서버에 CORS 허용이 필요합니다 — FAQ 참고.

Base64로 불러오기 — pdfBase64

PDF를 URL로 노출하고 싶지 않거나, API 응답·DB BLOB에서 바로 띄워야 하는 경우 사용합니다. pdfBase64와 pdfUrl을 모두 지정하면 pdfBase64가 우선합니다.

Base64 로드 js

// 예: 서버 API가 PDF를 Base64로 내려주는 경우
fetch('/api/documents/123')
  .then(function (res) { return res.json(); })
  .then(function (doc) {
    Inko.mount('#pdf-container', {
      src: '/pdfv/index.html',
      pdfBase64: doc.base64,        // data: 접두어 없는 순수 Base64 문자열
      fileName: doc.name
    });
  });

읽기 전용 모드 — readOnly

readOnly: true를 지정하면 편집 도구·저장이 비활성화되고 열람만 가능합니다. 결재 완료 문서, 외부 공유 화면 등에 사용합니다.

읽기 전용 js

Inko.mount('#pdf-container', {
  src: '/pdfv/index.html',
  pdfUrl: '/files/approved-contract.pdf',
  readOnly: true   // 편집 도구 비활성 — 열람 전용
});

마운트 후 문서 교체

뷰어 인스턴스를 유지한 채 loadPdfUrl() · loadPdfBase64()로 다른 문서를 열 수 있습니다. 문서함·결재함처럼 목록에서 문서를 오가는 화면에서는 페이지 이동 없이 교체하는 이 방식이 효율적입니다.

런타임 문서 교체 js

// 마운트는 한 번만, 문서는 계속 교체
var viewer = Inko.mount('#pdf-container', { src: '/pdfv/index.html' });

// 문서 목록에서 클릭할 때마다 호출
function openDocument(doc) {
  viewer.loadPdfUrl(
    doc.url,          // PDF URL
    doc.name,         // 파일명 (선택)
    doc.canvasData,   // 이 문서의 직전 저장본 (선택 — 이어서 편집)
    doc.approved      // 승인 완료 문서는 읽기 전용 (선택)
  );
}

// Base64 버전도 동일한 시그니처
// viewer.loadPdfBase64(base64, fileName, canvasData, readOnly)

문서별 canvasData를 함께 전달하세요

세 번째 인자 canvasData에 해당 문서의 직전 저장본을 넘기면, 문서를 전환할 때마다 각 문서의 편집 상태가 그대로 복원됩니다.

로드 완료 시점 잡기 — onPdfLoaded

PDF 렌더링이 끝나면 onPdfLoaded 콜백이 호출됩니다. 로딩 UI 제거, 다중 사용자 레이어 주입 등 "문서가 화면에 보인 다음"에 해야 할 작업은 이 시점에 실행하세요.

onPdfLoaded js

Inko.mount('#pdf-container', {
  src: '/pdfv/index.html',
  pdfUrl: '/files/document.pdf',
  onPdfLoaded: function () {
    // 렌더 완료 시점 — 로딩 스피너 제거, 오버레이 주입 등
    hideSpinner();
  }
});

호출 타이밍은 신경 쓰지 않아도 됩니다

뷰어 초기화가 끝나기 전에 loadPdfUrl() 등을 호출해도 요청은 유실되지 않습니다. SDK가 내부 큐에 보관했다가 뷰어 준비 완료(viewerReady) 직후 순서대로 전달합니다. 따라서 onReady를 기다렸다가 호출하는 보일러플레이트가 필요 없습니다.