1.0.8 • Published 9 months ago
@gdin/file-viewer v1.0.8
FileViewer 文件预览
import { FileViewer } from '@gdin/file-viewer';
注意:除了 pdf 之外,其他文件只做了简单的内容展示、尚存在样式丢失的问题
组件
组件 | 名称 |
---|---|
FileViewer | 文件预览 |
FileViewerModal | 文件预览-弹窗模式 |
新版本支持按需加载
,故又拆分成新增了下列的组件:
组件 | 名称 | 文件后缀或媒体类型 |
---|---|---|
FileAudioViewer | 音频文件 | .mp3 |
FileDocxViewer | docx 文件 | .docx |
FileImageViewer | 图片文件 | image/* |
FileJsonViewer | json 文件 | .json |
FilePdfViewer | pdf 文件 | .pdf |
FileTxtViewer | 纯文本文件 | text/* .js .ts .xml 等等 |
FileVideoViewer | 视频文件 | .webm .mp4 |
FileXlsxViewer | xlsx 文件 | .xlsx |
属性
key | 名称 | 类型 | 备注 |
---|---|---|---|
url | 文件地址 | string | |
suffix | 指定的文件后缀 | string | 如 sudffix = pdf ,如为空则从地址上读取 |
pdf
默认使用的worker
文件是:https://unpkg.com/pdfjs-dist@2.12.313/build/pdf.worker.min.js
下载可在业务项目中单独设置
pdf
所需的worker
文件,当前pdfjs
的版本是2.12.313
,需设置对应版本的worker
文件,如:
import { setPdfWorkerSrc } from '@gdin/file-viewer';
setPdfWorkerSrc('http://127.0.0.1/pdfjs-dist@2.12.313_build_pdf.worker.min.js');
- 如果是基于
umi3
架构的,或者是用webpack4
的 ,需要在.umirc.js
或config/config.js
添加配置:
{
nodeModulesTransform: {
...,
exclude: ['pdfjs-dist']
}
}
弹窗模式
import { FileViewerModal } from '@gdin/file-viewer';
ref 方法
方法 | 名称 | 类型 |
---|---|---|
show | 显示弹窗 | (url: string, suffix?: string) => void |
hide | 隐藏弹窗 | () => void |