在日常开发中我们经常会遇到在线预览文件的需要,如果项目是react框架,那么我们可以使用react-file-viewer插件,可以适应多文件,例如:pdf,MP4,各种图片,csv,xlxs,word文件等。

ppt类型不支持预览;

参考查询:react-file-viewer - npm

1.如何使用

<FileViewer fileType={fileType} filePath={url}/>

基础使用如上,fileType(string)是文件类型,例如:pdf、MP4等,filePath是后台返回的文件的url;

并且提供了类型不支持的时候如何自定义展示组件,unsupportedComponent,这里要注意,这个属性的类型是一个function,可以向下面这样书写:

<FileViewer fileType={fileType} filePath={url} unsupportedComponent={() => {
                  return <div className='not_support'>
                            <FormattedMessage id="not_support_preview"/>
                          </div>
                }} />

将自定义的组件返回即可。

2.踩坑

书写过程页踩了一些坑:

1)excel文件

在预览excel文件的时候,插件预览的内容和格式可能会和源文件不同,这里还没找到解决方案,网上有些比较复杂的转换,可以看一下;

2)视频

这个应该是浏览器机制,在视频预览的时候,加载视频是需要一定的时间的,浏览器自动会预加载,如果这时候我们切换到其他文件的预览,当上一个视频加载完成后会自动的覆盖掉现有的内容,这里解决方案可以在切换的时候终止掉浏览器的一切活动:window.stop(),便可以终止掉正在加载的视频进程;

差不多需要注意的就这两个地方了。

3.比较

为什么不用embed或者iframe标签,因为后台这次直接把文件返回了回来,直接放在src里面,就会直接下载了,前端还需要请求一下,转一下文件的格式,像这样下面那样,先转为blob格式在转成链接,才能识别出来,还是插件方便一些。

  useEffect(() => {
    if (fileType === 'pdf' || fileType === 'txt') {
      fetch(url).then((res: any) => {
       res?.blob().then((r: any) => {
        const urlObject = window.URL || window.webkitURL || window;
        const blob = new Blob([r], { type: fileType === 'pdf' ? 'application/pdf': fileType === 'txt' ? 'text/plain': ''});
        //@ts-ignore
        const src = urlObject.createObjectURL(blob);
        set_src(src);
       })
      })
    }
  }, [url, fileType])

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐