1.0.9 • Published 8 months ago
@gdin/file-viewer v1.0.9
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 |