react展示各类型文件，音乐类型，视频类型，图片类型，pdf类型，html，txt ，word

该文章介绍对于不同类型文件的处理。
文件均已HTTP请求方式
这里需要注意的是’xls’, ‘xlsx’, ‘doc’, ‘docx’ 处理 是转译 转成了PDF 小伙伴们需要和后端协调

import ReactAudioPlayer from 'react-audio-player';
import { Player } from 'video-react';

import ViewHTML from '@/components/viewHTML/ViewHTML.jsx';  //文件处



                    {item.suffix.indexOf('cda') > -1 ||
                      item.suffix.indexOf('mp3') > -1 ||
                      item.suffix.indexOf('wav') > -1 ||
                      item.suffix.indexOf('aif') > -1 ||
                      (item.suffix.indexOf('mpeg') > -1 && (
                        <ReactAudioPlayer src={'/api/original?id=' + item.id} autoPlay             controls style={{ width: '100%' }} />
                      ))}

                    {item.suffix.indexOf('avi') > -1 ||
                      item.suffix.indexOf('mp4') > -1 ||
                      item.suffix.indexOf('mov') > -1 ||
                      item.suffix.indexOf('asf') > -1 ||
                      item.suffix.indexOf('flv') > -1 ||
                      item.suffix.indexOf('rmvb') > -1 ||
                      item.suffix.indexOf('3gp') > -1 ||
                      item.suffix.indexOf('wmv') > -1 ||
                      (item.suffix.indexOf('mkv') > -1 && (
                        <Player>
                          <source src={'/api/original?id=' + item.id + '&watermark=' + this.state.watermark} />
                        </Player>
                      ))}

                    {item.suffix.indexOf('JPG') > -1 ||
                      item.suffix.indexOf('PNG') > -1 ||
                      item.suffix.indexOf('JPEG') > -1 ||
                      item.suffix.indexOf('TIF') > -1 ||
                      item.suffix.indexOf('TIFF') > -1 ||
                      item.suffix.indexOf('jpg') > -1 ||
                      item.suffix.indexOf('png') > -1 ||
                      item.suffix.indexOf('jpeg') > -1 ||
                      item.suffix.indexOf('tif') > -1 || item.suffix.indexOf('tiff') > -1 ?
                      <img style={{ height: '650px' }} src={'/api/original?id=' + item.id + '&watermark=' + this.state.watermark} />
                      : ''}

                    {['txt', 'html'].includes(item.suffix.toLowerCase()) && (
                      <div
                        style={{ zIndex: '1' }}
                        ref="iframe"
                        frameBorder="0"
                        src={'/api/original?id=' + item.id + '&watermark=' + this.state.watermark}
                        style={{ width: '100%', height: '700px' }}
                      >
                        <ViewHTML url={`/api/original?id=${item.id}&watermark=${this.state.watermark}`} />
                      </div>
                    )}

                    {['xls', 'xlsx', 'doc', 'docx'].includes(item.suffix.toLowerCase()) && (
                      <OnlyOffice fileType={item.suffix} fileUrl={`/api/originals/showOriginal?id=${item.id}`} />
                    )}

                    {item.suffix.toLowerCase().indexOf('pdf') > -1 && (
                      <div>
                        <iframe
                          style={{ zIndex: '1' }}
                          ref="iframe"
                          frameBorder="0"
                          src={
                            `pdfjs/web/viewer.html?file=` + '%2fapi%2foriginal%3fid%3d' + item.id + '%26watermark%3d' + this.state.watermark
                          }
                          width="85%"
                          height="700px"
                        />
                        <iframe
                          src={`/api/originals/showOriginal?id=${item.id}`}
                          id={`printIframe` + item.id}
                          frameBorder="0"
                          style={{ display: 'none' }}
                        />
                      </div>
                    )}