react文件预览插件react-file-viewer

在日常开发中我们经常会遇到在线预览文件的需要，如果项目是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])