뷰어 표시

뷰어는 createPDFViewer(선택자, 옵션)으로 생성합니다. 생성 후 mount()로 화면에 부착하고, open()으로 문서를 엽니다.

1.생성과 옵션

JS뷰어 생성

import { createPDFViewer, DOCUMENT_MODE } from '/lib/coredocs-pdf-core-1.0.0.js';

const viewer = createPDFViewer('#viewer', {
  licenseKey: '발급받은-라이선스-키',
  mount: false,          // 수동 mount (fetcher 설정 후 부착)
});

viewer.setFetcher(fetcher);   // 백엔드 연동 (다음 장 참고)
await viewer.mount();

const opened = await viewer.open();

if (opened) {
  viewer.document.setMode(DOCUMENT_MODE.EDIT);
}

옵션	타입	기본값	설명
`licenseKey`	string	`''`	발급받은 라이선스 키. 호스트에 바인딩됨
`fetcher`	object	없음	백엔드 연동 함수 묶음 (`setFetcher`로 나중에 지정 가능)
`signer`	object	없음	전자서명 시 클라이언트 서명 함수 (`setSigner`로 지정 가능)
`mount`	boolean	`true`	생성 즉시 화면에 부착할지 여부

2.문서 모드

열린 문서는 세 가지 모드로 동작합니다. viewer.document.setMode(DOCUMENT_MODE.X)로 전환합니다.

모드	용도	가능한 동작
`VIEW`	보기	열람, 스크롤만
`INPUT`	입력	필드 값 입력 (배치는 불가)
`EDIT`	편집	필드 그리기, 선택, 이동, 크기조정

실행 예제: 편집 모드에서 TextField를 그리고, 입력 모드에서 값을 넣고, 보기 모드로 확인해 보세요준비 중…

JS데모 전체 코드

import { createPDFViewer, DOCUMENT_MODE, DRAWING_DRAW_MODE } from '/lib/coredocs-pdf-core-1.0.0.js';

const BACKEND = 'http://localhost:8102';
const fileName = 'devsite.pdf';

// 1) 백엔드 연동 함수 (자세한 설명은 다음 장)
const fetcher = {
  open: async () => {
    const response = await fetch(`${BACKEND}/document/${encodeURIComponent(fileName)}`);
    return await response.json();
  },
  pageRender: async ({ page, renderScale = 2 }) => {
    const response = await fetch(
      `${BACKEND}/document/${encodeURIComponent(fileName)}/page/${page.pageIndex}/render?scale=${renderScale}`);
    return await response.blob();
  },
  annotationRender: async ({ annotation, renderScale = 2 }) => {
    const response = await fetch(
      `${BACKEND}/document/${encodeURIComponent(fileName)}/annotation/${annotation.objectKey.number}/${annotation.objectKey.generation}/render?scale=${renderScale}`);
    return await response.blob();
  },
};

// 2) 뷰어 생성 → 부착 → 문서 열기
const viewer = createPDFViewer('#viewer', {
  licenseKey: '발급받은-라이선스-키',
  mount: false,
});

viewer.setFetcher(fetcher);
await viewer.mount();
await viewer.open();

// 3) 모드 전환, 그리기 (데모 툴바 버튼이 하는 일)
viewer.document.setMode(DOCUMENT_MODE.EDIT);
viewer.document.drawing.beginDraw(DRAWING_DRAW_MODE.TEXT_FIELD);

3.단축키

편집 중 자주 쓰는 키 조작이 라이브러리에 내장돼 있습니다. 뷰어를 붙이면 별도 구현 없이 그대로 동작합니다. 대부분 EDIT 모드에서 필드를 선택한 상태를 전제로 합니다.

키	동작	모드
`Ctrl`+`C`	선택한 필드 복사	EDIT
`Ctrl`+`V`	붙여넣기	EDIT
`F2`	필드 값 편집 시작(입력 커서 진입)	INPUT / EDIT
`Enter`	포커스된 필드 선택 (`Ctrl`+`Enter`: 다중 선택 토글)	EDIT
방향키	선택한 필드 이동, 1px (`Ctrl`: 10px)	EDIT
`Shift`+방향키	선택한 필드 크기 조절, 1px (`Ctrl`: 10px, `Alt`: 왼쪽/상단 기준)	EDIT
`Delete`	선택한 필드 삭제	EDIT

• 복사/붙여넣기 동작 조건

복사/붙여넣기는 브라우저 클립보드 API를 사용하므로 다음 조건이 필요합니다. 나머지 단축키에는 해당하지 않습니다. - HTTPS 또는 localhost에서만 동작합니다. 브라우저 클립보드 API(navigator.clipboard)가 보안 컨텍스트를 요구하기 때문으로, 일반 http:// 환경에서는 동작하지 않습니다.

브라우저가 클립보드 읽기 권한을 차단하면 붙여넣기가 되지 않습니다.

4.편집 상호작용

EDIT 모드에서는 마우스로 필드를 놓고 옮기고 크기를 바꿉니다. 정렬/간격/크기 통일은 API로 부릅니다.

4.1마우스 조작

조작	동작
필드 클릭	선택
`Ctrl`+클릭	다중 선택(토글)
빈 곳 드래그	드래그 박스 안의 필드를 한 번에 선택
필드 드래그	이동
모서리 핸들 드래그	크기 조절

4.2정렬 / 간격 / 크기 통일

여러 필드를 선택한 뒤 viewer.document.drawing의 메서드로 정돈합니다. 인자를 주지 않으면 현재 선택된 필드(document.selectedAnnotations)가 대상입니다.

JS정렬/간격/크기

const { drawing } = viewer.document;

// 정렬 (선택된 필드 기준)
await drawing.alignLeft();      // 왼쪽
await drawing.alignCenter();    // 가로 가운데
await drawing.alignRight();     // 오른쪽
await drawing.alignTop();
await drawing.alignMiddle();    // 세로 가운데
await drawing.alignBottom();

// 간격 균등 분배
await drawing.distributeHorizontally();
await drawing.distributeVertically();

// 크기 통일
await drawing.equalizeWidth();   // 넓이 맞춤
await drawing.equalizeHeight();  // 높이 맞춤

• 참고

모든 메서드는 async입니다. 대상은 기본적으로 viewer.document.selectedAnnotations이며, 특정 필드 배열을 첫 인자로 넘겨 대상을 직접 지정할 수도 있습니다.

5.닫기와 해제

viewer.close()는 열린 문서를 닫고(뷰어는 유지), viewer.dispose()는 문서를 닫고 라이선스·fetcher·signer 등 리소스까지 해제합니다.