@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 로,대체也

설치

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) 로컬 정적:

// package.json (소비 프로젝트)
{ "scripts": { "postinstall": "file-viewer-setup-pdfjs public/pdfjs" } }

사용

import { FileViewer, ViewerFile } from "@ehfuse/file-viewer";

<FileViewer
    open={open}
    onClose={() => setOpen(false)}
    file={{ name: "report.pdf", url: "/files/report.pdf" }}
/>;

시그니처

// 표시할 파일 — 데이터 소스는 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>; // 커스텀 blob 로더 (인증 다운로더 등)
    onDownload?: (file: ViewerFile) => void | Promise<void>; // 다운로드 동작 대체
    pdfAssetBase?: string; // pdfjs 자산 경로 (기본 "/pdfjs")
    locale?: string; // 화면 문구 언어 — ko·en·ja·mn·kk (기본 ko, 모르는 언어는 영어)
    labels?: Partial<ViewerLabels>; // 문구를 직접 바꿀 때 (언어 기본 문구 위에 덮어쓴다)
    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<Blob>; // 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 로.

<FileViewer open={open} onClose={close} file={file} locale="mn" labels={{ download: "Татаж авах" }} />

{\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) (中文(简体) ).

<FileViewer open file={file} onClose={close} variant="simple" />
<FileViewer open file={file} onClose={close} toolbar={{ rotate: false, share: false }} />
<FileViewer open file={file} onClose={close} variant="simple" toolbar={{ zoom: true }} />

(原始内容存档于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) (中文(简体) ).
• ======================================================================================================= ==============================================================================================(==============(======== (======== (=======================.

<FileViewer open={open} onClose={close} file={files[i]} files={files} initialIndex={i} chrome="floating" variant="simple" toolbar={{ download: false }} />

예제

example/ Vite + React + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ** * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * **********************.

cd example && npm install && npm run dev

许可证

麻省理工学院