# @ehfuse/file-viewer 中文文档 规范地址：https://npmcn.com/package/%40ehfuse/file-viewer/ 版本：0\.2\.39 npm 元数据更新时间：2026-11-13T15:23:52.393Z 中文译文更新时间：2026-11-14T00:35:39.813Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40ehfuse/file-viewer 原文对照：https://npmcn.com/package/%40ehfuse/file-viewer/?lang=original 项目主页：https://github.com/ehfuse/file-viewer#readme 源码仓库：https://github.com/ehfuse/file-viewer ## 关键信息（来自 npm 元数据） - 包体积（解压后）：217 kB，25 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：0 个 - peer 依赖：xlsx \>=0\.18\.0，react ^18\.0\.0 \|\| ^19\.0\.0，exceljs \>=4\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0，react-pdf \>=9\.0\.0，@mui/material \>=5\.0\.0，@emotion/react \>=11\.0\.0，@emotion/styled \>=11\.0\.0，react-spreadsheet \>=0\.9\.0，@mui/icons-material \>=5\.0\.0，@monaco-editor/react \>=4\.6\.0，@ehfuse/mui-fadeout-loading-progress \>=1\.0\.0 - 首次发布：2026-08-18T02:25:26.640Z - 最新版本发布：2026-11-13T15:23:52.125Z - 近 30 天下载量：2707（2026-10-13 至 2026-11-11，npm 官方下载统计） - 已发布版本数：42（近 12 个月 42 个） ## 中文简介 反响 QQQ (이미지/PDF/텍스트/코드/HTML/스프레드시트/오디오/오디오,MUI-기반) ## 安装 ```sh npm install @ehfuse/file-viewer ``` 也可以使用：`pnpm add @ehfuse/file-viewer`、`yarn add @ehfuse/file-viewer`、`bun add @ehfuse/file-viewer` ## README # @ehfuse/ 文件查看器 (原始内容存档于2018-09-29). React QQQ (MUI QQ). 이미지/PDF/텍스트/HTML/스프레드시트/풀스크린으로. - : - PDF: 썸네일 (모바일 (모바일)), 페이지 (키보드 (키보드)), 핀치 (핀치 (키보드)), 핀치 (re (re)), 회전 (re (re-pdf)) - +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ - QQ: CSV/XLS/XLSX, QX (SheetJS + 反应-平面表) - {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}你觉得呢, `onDownload` 로,대체也 ## 설치 ```bash npm install @ehfuse/file-viewer # peer: @mui/material @mui/icons-material @emotion/react @emotion/styled # react-pdf @monaco-editor/react react-spreadsheet xlsx # @ehfuse/mui-fadeout-loading-progress ``` PDF 미리보기는 pdfjs 자산 (工人/cmaps/폰트/wasm) 로컬 정적: ```jsonc // package.json (소비 프로젝트) { "scripts": { "postinstall": "file-viewer-setup-pdfjs public/pdfjs" } } ``` ## 사용 ```tsx import { FileViewer, ViewerFile } from "@ehfuse/file-viewer"; setOpen(false)} file={{ name: "report.pdf", url: "/files/report.pdf" }} />; ``` ## 시그니처 ```ts // 표시할 파일 — 데이터 소스는 blob → loadFile → url 순으로 해석 interface ViewerFile { name: string; // 파일명 (확장자로 타입 판별) url?: string; // 파일 URL (fetch) blob?: Blob; // 이미 로드된 blob mimeType?: string; // 확장자 없을 때 타입 폴백 previewUrl?: string; // 사진 — 원본을 받는 동안 먼저 보일 작은 사진(0.2.31, 이미 받아 둔 썸네일이면 열자마자 보인다) [key: string]: unknown; // 소비처 부가 필드 } interface FileViewerProps { open: boolean; onClose: () => void; file: ViewerFile | null; loadFile?: (file: ViewerFile) => Promise; // 커스텀 blob 로더 (인증 다운로더 등) onDownload?: (file: ViewerFile) => void | Promise; // 다운로드 동작 대체 pdfAssetBase?: string; // pdfjs 자산 경로 (기본 "/pdfjs") locale?: string; // 화면 문구 언어 — ko·en·ja·mn·kk (기본 ko, 모르는 언어는 영어) labels?: Partial; // 문구를 직접 바꿀 때 (언어 기본 문구 위에 덮어쓴다) pageNavPosition?: "toolbar" | "below"; // PDF 페이지 이동(‹ n ›) 자리 — 기본 머리줄, "below" 면 머리줄 아래 한 줄 variant?: "full" | "simple"; // 구성 — full(기본, 모든 단추) · simple(넘기기·다운로드·닫기만) toolbar?: ViewerToolbar; // 단추를 하나씩 켜고 끈다(구성보다 앞선다) swipe?: boolean; // 좌우로 밀어 넘기기(터치, 기본 true) — 사진 등은 파일, PDF 는 쪽(끝 쪽에서 파일) chrome?: "bar" | "floating"; // 머리줄 꼴 — bar(기본) · floating(머리줄 없이 ← · n/m · 좌우 화살표만) convertOffice?: (blob: Blob, file: ViewerFile) => Promise; // doc·docx·ppt·pptx·hwp·hwpx → PDF 변환기 (주면 그 문서도 PDF 로 미리보기) } // 헬퍼 function getFileType(fileName: string): ViewerFileType; function resolveFileType(fileName: string, mime: string): ViewerFileType; function isFileViewerPreviewable(fileName: string, includeOffice?: boolean): boolean; function ensureFileExtension(rawName: string, mimeType: string): string; function getEditorLanguage(fileName: string): string; function saveBlobAsFile(blob: Blob, filename: string): void; ``` ## 화면 `locale` 로(ko en ja-mn-kk,기본). {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢 `labels` 로. ```tsx ``` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `data-viewer-action="rotate-left" | "rotate-right"` {\\FN黑体\\FS22\\BORD1\\SHAD0\\3AHBE\\4AH00\\FSCX67\\FSCY66\\2CHFFFFFF\\3CH808080}你觉得呢. ## PDF 페이지 이동 자리 기본은. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `pageNavPosition="below"` 로 (44px)로 (44px)내린다 (44px)내린다 (44px)내린다 (44px))""""""""""""". ## {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `variant` 로, `toolbar` {\\fn华文仿宋\\fs16\\1cHD1D1D1}好! 아무것도 않으면 (`full`) (中文(简体) ). | 이름 | 단추 | 满 | 简单 | | --- | --- | --- | --- | | `fileNav` | \============================================================================================== (=================================================== (============================================ | ✓ | ✓ | | `pageList` | PDF | ✓ | | | `pageNav` | PDF 페이지 이동 ‹ ‹ › › › › | ✓ | ✓ | | `fileName` | +================================================================================================================================================= (===================================== (=============== (============== (============ (========================== | ✓ | ✓ | | `zoom` | 확대·축소 | ✓ | | | `fit` | 화면에 | ✓ | | | `rotate` | 회전 | ✓ | | | `download` | 다운로드 | ✓ | ✓ | | `share` | 공유 | ✓ | | | `close` | —————————————————————————————————————————————————————————————————— | ✓ | ✓ | ```tsx ``` (原始内容存档于2018-10-21). QQ 단추는 (예: 회전은 (PDF), 공유는 (기기가). ## \- === 翻译: - `swipe`页:1 `true`)——————————————————————————. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 **파일**, PDF + + + + + + **쪽**{\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}你觉得呢. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}==============================================================================================================================. - `chrome="floating"` -?),又名相克活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得怎么样. {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `env(safe-area-inset-top)` (原始内容存档于2017-10-29). QQ, 앱 Webview `--file-viewer-safe-top` 으로(예: `0px`) (中文(简体) ). - \======================================================================================================= ==============================================================================================(==============(======== (======== (=======================. ```tsx ``` ## 예제 `example/` Vite + React + \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \*\* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*. ```bash cd example && npm install && npm run dev ``` ## 许可证 麻省理工学院 ## 常见问题 ### @ehfuse/file-viewer 是什么？ 反响 QQQ \(이미지/PDF/텍스트/코드/HTML/스프레드시트/오디오/오디오,MUI-기반\) ### 如何安装 @ehfuse/file-viewer？ 在项目目录运行 npm install @ehfuse/file-viewer，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：xlsx（\>=0\.18\.0）、react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）、react-pdf（\>=9\.0\.0）、@mui/material（\>=5\.0\.0）、@emotion/react（\>=11\.0\.0）、@emotion/styled（\>=11\.0\.0）、react-spreadsheet（\>=0\.9\.0）、@mui/icons-material（\>=5\.0\.0）、@monaco-editor/react（\>=4\.6\.0）、@ehfuse/mui-fadeout-loading-progress（\>=1\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 file-viewer-setup-pdfjs，可以用 npx file-viewer-setup-pdfjs 直接运行。 ### @ehfuse/file-viewer 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @ehfuse/file-viewer 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @ehfuse/file-viewer 可以商用吗？ @ehfuse/file-viewer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @ehfuse/file-viewer 的下载量有多少？ 根据 npm 官方下载统计，@ehfuse/file-viewer 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,707 次，日均约 90 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @ehfuse/file-viewer 还在维护吗？ 最新版本 0\.2\.39 发布于 2026/11/13（今天）；至今共发布 42 个版本，其中过去 12 个月发布了 42 个；首次发布于 2026/08/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。