여러 문서 보기 BETA
여러 문서를 한 화면에서 하나의 문서처럼 이어서 봅니다. 화면과 툴바는 문서 뷰어와 같고, 왼쪽 파일 목록에서 볼 문서와 순서를 고릅니다.
베타 기능입니다. 옵션과 동작이 바뀔 수 있습니다. 운영 서비스에 적용하기 전에 담당자와 상의해 주세요.
실행 예제
아래는 이 페이지에 실제로 임베드된 화면입니다. 문서 두 개를 URL로 넘겨 이어서 보여 줍니다.
<div id="docs" style="height:720px"></div>
<input type="file" id="files" multiple>
<script src="https://dragdocs.com/embed/dragdocs.js"></script>
<script>
const viewer = DragDocs.multiViewer("#docs", {
clientId: "XXXX-XXXX-XXXX-XXXX-XXXX",
urls: ["/manual.docx", { url: "/api/documents/7/content", filename: "계약서.pdf" }],
onLoad: (e) => console.log("load", e.files, e.pages),
onError: (e) => console.error(e.message),
onOrderChange: (e) => saveOrder(e.files), // 사용자가 바꾼 순서를 저장할 때
});
// 사용자가 고른 파일을 목록 끝에 더한다
document.getElementById("files").addEventListener("change", (e) => viewer.add(e.target.files));
</script>왼쪽 파일 목록(264px)이 함께 들어가므로 높이는 640px 이상, 폭은 960px 이상을 권장합니다.
옵션
| 옵션 | 기본값 | 설명 |
|---|---|---|
clientId | — | 필수. 발급받은 라이선스 키 |
files | — | 처음 열 문서 목록. File · Blob · ArrayBuffer의 배열 또는 FileList |
urls | — | 처음 열 문서 URL 목록. 문자열 또는 { url, filename }. URL에 확장자가 없으면 filename을 지정하세요 |
credentials | "same-origin" | urls 요청에 쿠키가 필요하면 "include" |
tts | "local" | 읽어 주기 음성. "local" | "off" | "online" — 읽어 주기와 문서 보안 참고 |
문서는 files를 먼저, urls를 그다음 순서로 목록에 넣습니다. 사용자는 체크 상자로 볼 문서를 고르고, 손잡이를 끌거나 정렬 메뉴(추가한 순서·이름순·종류순)로 순서를 바꿀 수 있습니다. 바뀐 순서는 onOrderChange로 알려 줍니다.
이벤트와 메서드
| 콜백 | 페이로드 |
|---|---|
onReady | { isolated } — iframe이 준비됨. false면 새 창 폴백으로 전환됨 |
onLoad | { files, pages } — 문서를 합쳐 화면에 열 때마다(처음, 변환이 끝난 문서를 이어 붙일 때, 문서 추가·체크·순서 변경 후). files는 이어 붙인 파일명 순서 |
onError | { message, filename } — 문서 하나를 열지 못함. 나머지 문서는 그대로 표시됩니다 |
onOrderChange | { files } — 사용자가 목록 순서를 바꿈. files는 바뀐 순서의 파일명(체크하지 않은 문서 포함) |
onHyperlink | { url } — 문서 안 링크 클릭 |
| 메서드 | 설명 |
|---|---|
add(sources, { filename, mimeType, credentials }) | 문서를 목록 끝에 더합니다. sources는 하나 또는 배열·FileList. 형식은 files·urls와 같습니다 |
destroy() | iframe과 리스너를 제거합니다 |
iframe | 생성된 <iframe> 요소 |
읽어 주기와 문서 보안
파일 목록 아래의 읽기 버튼은 브라우저에 내장된 음성 합성으로 보고 있는 페이지부터 읽습니다. 한국어·일본어·영어 문장을 구분해 각 언어 음성으로 읽습니다.
tts | 동작 |
|---|---|
"local" (기본) | 사용자 기기에 설치된 음성만 씁니다. 문서 내용이 밖으로 나가지 않습니다. 기기에 그 언어 음성이 없으면 해당 문장은 건너뜁니다 |
"off" | 읽기 버튼을 숨깁니다 |
"online" | Edge·Chrome의 고품질 온라인 음성을 먼저 씁니다. 음질은 좋지만 읽는 문장이 Microsoft·Google 음성 서버로 전송됩니다 |
문서 변환·합치기·검색은 모두 브라우저 안에서 처리되며 서버로 전송되지 않습니다. 외부로 나갈 수 있는 것은
tts: "online"일 때 읽는 문장뿐입니다.
동작 방식과 제한
- Office·한글 문서는 브라우저 안에서 PDF로 바꾼 뒤 합칩니다. 글꼴이 없는 환경에서는 원본과 조금 다르게 보일 수 있습니다.
- 준비된 문서부터 바로 보여 주고, 나머지는 변환되는 대로 이어 붙입니다. 이어 붙이는 동안에는 보던 화면을 그대로 띄워 두어 깜빡이지 않고, 보던 쪽과 배율이 유지됩니다.
- 문서를 더하거나 체크·순서를 바꿔도 같은 방식으로 다시 합칩니다. 보던 파일의 위치는 유지됩니다.
- 툴바(검색·확대·썸네일·다운로드)는 문서 뷰어와 같은 모양입니다. 문서는 한 쪽씩 표시하고 이전·다음 버튼, 쪽 번호, 썸네일, 파일 목록으로 이동합니다. 다운로드하면 지금 순서대로 합친 PDF 하나를 받습니다.
- 지원 형식: pdf · doc · docx · ppt · pptx · xls · xlsx · hwp · hwpx · odt · jpg · png · gif · bmp · svg · webp. txt·zip과 암호가 걸린 PDF는 목록에 표시만 되고 합치지 않습니다.
- 문서 엔진(약 10MB)을 처음 한 번 내려받습니다. 이후에는 브라우저 캐시를 씁니다.
새 창 폴백 (Safari · Firefox · 모바일)
문서 뷰어와 같습니다. iframe이 격리되지 못하는 브라우저에서는 "새 창에서 문서 열기" 버튼이 표시되고, 새 창이 urls로 받은 문서를 직접 내려받아 엽니다.
files로 넘긴 문서는 새 창으로 전달할 수 없습니다. 문서 API의 CORS 설정은 문서 뷰어 — 새 창 폴백을 참고하세요.