문서 뷰어
오피스·PDF·아래아한글 문서를 다운로드 없이 브라우저에서 바로 엽니다.
실행 예제
아래는 이 페이지에 실제로 임베드된 뷰어입니다. 바로 밑의 코드가 그대로 실행된 결과입니다.
<div id="doc" style="height:560px"></div>
<input type="file" id="file">
<script src="https://dragdocs.com/embed/dragdocs.js"></script>
<script>
const viewer = DragDocs.viewer("#doc", {
clientId: "XXXX-XXXX-XXXX-XXXX-XXXX",
url: "/sample.pdf", // 처음 보여줄 문서 (생략 가능)
onReady: (e) => console.log("ready", e.isolated),
onLoad: (e) => console.log("load", e.filename),
onError: (e) => console.error(e.message),
});
document.getElementById("file").addEventListener("change", (e) => viewer.open(e.target.files[0]));
</script>clientId를 발급받은 값으로 바꾸면 그대로 동작합니다. Safari·Firefox에서 이 페이지를 열면 뷰어 자리에 "새 창에서 문서 열기" 버튼이 보이는데, 그것이 해당 브라우저 사용자가 보게 될 화면입니다(새 창 폴백).
옵션
| 옵션 | 기본값 | 설명 |
|---|---|---|
clientId | — | 필수. 발급받은 라이선스 키 |
file | — | 바로 열 문서. File · Blob · ArrayBuffer |
url | — | 문서 URL. file 대신 쓰거나, 새 창 폴백용으로 함께 지정 |
filename | — | Blob/ArrayBuffer를 넘길 때 파일명 (확장자 판별) |
mimeType | — | MIME. 엔진은 MIME을 우선하므로 Blob/ArrayBuffer를 넘길 때는 반드시 지정하세요. <input type=file>의 File은 자동으로 채워집니다 |
credentials | "same-origin" | url 요청에 쿠키가 필요하면 "include" |
theme | "light" | "light" | "dark" |
이벤트와 메서드
| 콜백 | 페이로드 |
|---|---|
onReady | { isolated } — iframe이 준비됨. false면 새 창 폴백으로 전환됨 |
onLoad | { filename } — 문서가 열림 |
onError | { message } |
onHyperlink | { url } — 문서 안 링크 클릭 |
| 메서드 | 설명 |
|---|---|
open(source, { filename, mimeType, credentials }) | 문서를 엽니다. source는 File · Blob · ArrayBuffer · URL 문자열 |
destroy() | iframe과 리스너를 제거합니다 |
iframe | 생성된 <iframe> 요소 |
const viewer = DragDocs.viewer("#doc", {
clientId: "XXXX-XXXX-XXXX-XXXX-XXXX",
url: "/api/documents/123/content",
credentials: "include",
theme: "dark",
onLoad: (e) => console.log("열림:", e.filename),
onError: (e) => alert(e.message),
});
// 나중에 다른 문서로 바꾸기
viewer.open(anotherFile);새 창 폴백 (Safari · Firefox · 모바일)
iframe이 격리되지 못하는 브라우저에서는 iframe 자리에 "새 창에서 문서 열기" 버튼이 표시되고, 새 창이 문서 URL을 직접 내려받아 엽니다.
새 창은 https://dragdocs.com에서 열리므로 문서 API 응답에 CORS 헤더가 필요합니다.
Access-Control-Allow-Origin: https://dragdocs.com
# 쿠키 인증을 쓰면 (credentials: "include")
Access-Control-Allow-Credentials: truefile만 지정하고 url이 없으면 이 브라우저에서는 문서를 열 수 없다는 안내가 표시됩니다.
폴백까지 지원하려면 url을 함께 넘기세요.
지원 형식
pdf · doc · docx · ppt · pptx · xls · xlsx · hwp · hwpx · odt · txt · jpg · png · gif · bmp · svg · zip