react項目中線上預覽附件

這幾天在做一些管理背景的公共子產品，其中遇到了附件下載下傳，線上預覽的功能

這裡發現了一個很好的線上預覽插件 react-file-viewer（自己到npm去搜就好了）npm install --save  react-file-viewer

Supported file formats:

• Images: png, jpeg, gif, bmp, including 360-degree images
• pdf
• csv
• xslx
• docx
• Video: mp4, webm
• Audio: mp3

用法如下：

import React, { Component } from 'react';
import logger from 'logging-library';
import FileViewer from 'react-file-viewer';
import { CustomErrorComponent } from 'custom-error';

const file = 'http://example.com/image.png'
const type = 'png'

class MyComponent extends Component {
  render() {
    return (
      <FileViewer
        fileType={type}
        filePath={file}
        errorComponent={CustomErrorComponent}
        onError={this.onError}/>
    );
  }

  onError(e) {
    logger.logError(e, 'error in file-viewer');
  }
}