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/[email protected]/build/pdf.worker.min.js 下载

• 可在业务项目中单独设置pdf所需的worker文件，当前pdfjs的版本是2.12.313，需设置对应版本的worker文件，如：

import { setPdfWorkerSrc } from '@gdin/file-viewer';

setPdfWorkerSrc('http://127.0.0.1/[email protected]_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 |