Preview 모드

Preview는 저장된 프로젝트를 읽기 전용으로 보여주는 모드입니다. 편집 기능은 없고, 페이지 이동과 가변 데이터 주입만 지원합니다. 주문 내역 화면에서 사용자가 만든 결과물을 다시 보여줄 때 씁니다.

띄우기

const session = edicus.openPreview({
  parent_element: el,
  token,
  project_id,
  partner: '<파트너 코드>',
  uid: 'CUSTOMER_UID',
  npage: 2,
})

필수 옵션은 project_id, partner, uid, token, parent_element입니다. ps_code는 선택입니다.

partner와 uid는 Preview에만 있는 필수값입니다. 다른 띄우기 메서드에서는 partner가 선택이고 uid는 아예 없습니다.

옵션

string

default:"host"

division code입니다. 생략하면 SDK가 'host'를 채워 넣습니다.

'ko' | 'en' | 'ja'

default:"ko"

언어 코드입니다. 생략하면 SDK가 'ko'를 채워 넣습니다.

number | 'auto'

default:"1"

한 화면에 보여줄 페이지 수입니다. 'auto'면 상품의 pageGroup 설정을 따릅니다.

'horizontal' | 'vertical' | `grid:${number}`

default:"horizontal"

페이지 배치 방향입니다. grid:312처럼 썸네일 크기를 함께 지정할 수 있습니다.

string

default:"default"

생략하면 SDK가 'default'를 채워 넣습니다. 현재 Preview는 이 값에 따라 동작을 바꾸지 않으므로 생략해도 됩니다.

Record<string, unknown>

추가 설정입니다. 지연 파라미터입니다.

unknown

첫 렌더에 바로 반영할 VDP 행입니다. 지연 파라미터입니다.

{ method?: string; maxScale?: number }

줌 옵션입니다. 지연 파라미터입니다.

지연 파라미터가 있으면 URL에 wait_options, wait_data_row, wait_zoom 플래그가 붙고, Preview가 요청할 때 SDK가 값을 보냅니다. 띄우기 옵션을 보세요.

이벤트

type은 전부 from-edicus-preview입니다.

action	payload	설명
`open-report`	`{ status } & Record<string, unknown>`	프로젝트 로드의 시작, 끝, 실패를 알립니다. `status`는 `'start'`, `'end'`, `'error'` 중 하나입니다
`close`	`undefined`	브라우저 뒤로가기 등으로 미리보기를 닫아야 할 때 옵니다
`page-updated`	`unknown`	표시 중인 페이지가 바뀌었습니다
`doc-changed`	`DocChanged`	문서가 로드되거나 변경됐습니다
`set-data-row-report`	`SetDataRowReport`	`set-data-row` 커맨드가 문서 로드 전에 전송됐을 때의 실패 리포트입니다
`zoom-scale-changed`	`{ scale: number }`	줌 배율이 바뀌었습니다
`save-doc-report`	`SaveDocReport`	타입에는 있지만 현재 편집기 소스에는 이 이벤트를 보내는 실행 경로가 없습니다

PreviewSession.waitForExit()는 close를 기다려 'close'로 resolve합니다. 브라우저 뒤로가기를 눌렀을 때 정리하는 것은 호스트의 몫입니다.

session.on('close', () => {
  session.close()
})

페이지 이동

TnView와 같습니다.

session.movePage('prev')
session.movePage('next')

가변 데이터

PreviewSession에는 setVariableDataRow 헬퍼가 없습니다. set-data-row 커맨드를 직접 보냅니다.

session.post('set-data-row', { cols: [{ id: 'name', value: { text: '전 지 현' } }] })

타입은 TnView와 같은 VariableDataRow입니다. TnView와 VDP를 보세요.

커맨드

type은 전부 to-edicus-preview입니다.

action	info	설명
`set-data-row`	`VariableDataRow \| VariableDataRow[]`	가변 데이터를 반영합니다
`move-page`	`{ direction: 'prev' \| 'next' }`	페이지를 이동합니다
`set-zoom-scale`	`unknown`	줌 배율을 바꿉니다
`set-flow`	`unknown`	페이지 배치를 바꿉니다

시작하기

개념

편집기 SDK

서버 연동

레퍼런스

띄우기

옵션

이벤트

페이지 이동

가변 데이터

커맨드

다음 단계

TnView와 VDP

Server API 호출하기

​띄우기

​옵션

​이벤트

​페이지 이동

​가변 데이터

​커맨드

​다음 단계

TnView와 VDP

Server API 호출하기

띄우기

옵션

이벤트

페이지 이동

가변 데이터

커맨드

다음 단계