DragDocs 연동 가이드
스크립트 한 줄로 고객사 웹 페이지에 문서 뷰어·텍스트 추출·HTML 변환·AI Editor를 붙입니다. 문서는 브라우저 안에서만 처리되며 서버로 전송되지 않습니다. 고객사 서버에 헤더 설정이 필요 없습니다.
빠른 시작
로더 스크립트 하나를 넣고, 붙일 도구의 함수를 호출합니다. 모든 도구가 같은 형태입니다.
<div id="doc" style="height:560px"></div>
<script src="https://dragdocs.com/embed/dragdocs.js"></script>
<script>
DragDocs.viewer("#doc", { clientId: "XXXX-XXXX-XXXX-XXXX-XXXX", url: "/sample.pdf" });
</script>| 도구 | 함수 | 결과 |
|---|---|---|
| 문서 뷰어 | DragDocs.viewer(...) | 화면에 문서 표시 |
| 텍스트 추출 | DragDocs.extractor(...) | getResult() → 페이지별 텍스트 |
| HTML 변환 | DragDocs.convertor(...) | getResult() → 페이지별 HTML |
| AI Editor | DragDocs.aiEditor(...) | getContent() → 편집된 마크다운/HTML |
- 각 페이지에 실제로 동작하는 실행 예제와 복사할 수 있는 코드가 있습니다.
- 컨테이너에는 명시적인 높이가 있어야 합니다. 높이가 0이면 아무것도 보이지 않습니다.
동작 방식
문서 엔진은 WASM 스레드를 쓰기 때문에 교차출처 격리(cross-origin isolation)된 문서 안에서만 동작합니다.
예전에는 고객사 페이지 전체에 COOP/COEP 헤더를 설정해야 했지만, 지금은 격리를 DragDocs 쪽에서 처리합니다.
| 경로 | 조건 | 설명 |
|---|---|---|
| iframe (기본) | Chrome · Edge 137+ 데스크톱 | dragdocs.com/embed/…가 iframe 안에서 스스로 격리됩니다(Document-Isolation-Policy). 고객 페이지는 영향을 받지 않고, 문서는 postMessage로 전달됩니다. |
| 새 창 (폴백) | 그 외 브라우저 | iframe 자리에 "새 창에서 문서 열기" 버튼이 표시되고, 클릭하면 새 창이 문서 URL을 직접 내려받아 엽니다. 문서 URL이 필요합니다 — 새 창 폴백 참고. |
AI Editor는 격리가 필요 없어 모든 브라우저에서 iframe으로 동작합니다. Web Office는 스크립트 임베드가 아니라 서버 간 연동입니다.
라이선스 키와 도메인
clientId는 담당자에게 서비스 도메인(예:docs.example.com)을 알려주고 발급받습니다. 개발 단계라면localhost도 함께 등록을 요청하세요.- iframe은 clientId에 등록된 도메인에서만 렌더링됩니다. 등록되지 않은 페이지에 넣으면 브라우저 콘솔에
frame-ancestors위반이 기록되고 빈 프레임이 됩니다. - 고객 페이지가 다른 포털 안에 iframe으로 들어가 있으면 그 포털 도메인도 등록해야 합니다 (브라우저는 모든 조상 프레임을 검사합니다).
- 서브도메인이 여럿이면
*.example.com형태로 등록을 요청하세요. 포트와 스킴은 검사하지 않습니다. - 라이선스가 만료되었거나 키가 없으면 iframe 안에 안내 문구가 표시됩니다.