@baneung-pack/doc-viewer

바능 디자인 시스템 문서뷰어 — HWPX·HWP(한글 5.0)·XLSX·CSV를 서버 변환 없이 브라우저에서 직접 파싱·렌더링합니다. 문서가 브라우저 밖으로 전송되지 않아 내부망에서 사용할 수 있고, 검색·조문 목차·음성 낭독·보안(워터마크·인쇄/복사 제어·열람 이력)·페이지 썸네일·반응형 축소를 내장합니다.

파서·렌더러 엔진(src/core)은 이 패키지의 자체 구현입니다 (Apache-2.0).

설치 (React)

pnpm add @baneung-pack/doc-viewer

import { DocViewer } from '@baneung-pack/doc-viewer';

function Page() {
  const [file, setFile] = React.useState<File | null>(null);
  return (
    <>
      <input
        type="file"
        accept=".hwpx,.hwp,.xlsx,.csv"
        onChange={(e) => setFile(e.target.files?.[0] ?? null)}
      />
      <DocViewer file={file} height="640px" />
    </>
  );
}

script 태그 임베드 (npm 없이 사용)

dist/doc-viewer.min.js 파일 하나를 내려받아 정적 경로에 두면 JSP·순수 HTML 등 레거시 사이트에서도 씁니다.

<div id="viewer" style="height: 640px"></div>
<script src="/static/doc-viewer.min.js"></script>
<script>
  BaneungDocViewer.mount('#viewer', { src: '/files/notice.hwpx' });
</script>

지원 포맷

| 포맷 | 지원 수준 | | ------------------------ | ------------------------------------------------------------------ | | .hwpx (한글 표준) | 완전 지원 — 표·이미지·페이지·검색·목차·낭독·보안 | | .hwp (한글 5.0 바이너리) | 근사 렌더링 — 표(병합)·이미지·서식·원본 쪽 경계 | | .xlsx | 열람용 — 셀 스타일·원본 셀 크기·전체 시트 검색 | | .csv | 지원 — UTF-8/EUC-KR·구분자 자동 감지 | | .pdf | 미포함 — pdf.js 등으로 구현한 렌더러를 pdfRenderer prop으로 주입 |

라이선스

Apache-2.0. 서드파티 고지는 THIRD-PARTY-NOTICES.md 참고.