1.0.8 • Published 9 months ago

@gdin/file-viewer v1.0.8

Weekly downloads
-
License
MIT
Repository
-
Last release
9 months ago

FileViewer 文件预览

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

注意:除了 pdf 之外,其他文件只做了简单的内容展示、尚存在样式丢失的问题

组件

组件名称
FileViewer文件预览
FileViewerModal文件预览-弹窗模式

新版本支持按需加载,故又拆分成新增了下列的组件:

组件名称文件后缀或媒体类型
FileAudioViewer音频文件.mp3
FileDocxViewerdocx 文件.docx
FileImageViewer图片文件image/*
FileJsonViewerjson 文件.json
FilePdfViewerpdf 文件.pdf
FileTxtViewer纯文本文件text/* .js .ts .xml 等等
FileVideoViewer视频文件.webm .mp4
FileXlsxViewerxlsx 文件.xlsx

属性

key名称类型备注
url文件地址string
suffix指定的文件后缀stringsudffix = 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.jsconfig/config.js 添加配置:
{
  nodeModulesTransform: {
    ...,
    exclude: ['pdfjs-dist']
  }
}

弹窗模式

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

ref 方法

方法名称类型
show显示弹窗(url: string, suffix?: string) => void
hide隐藏弹窗() => void