这几天在做一些管理后台的公共模块,其中遇到了附件下载,在线预览的功能
这里发现了一个很好的在线预览插件 react-file-viewer(自己到npm去搜就好了)npm install --save react-file-viewer
Supported file formats:
- Images: png, jpeg, gif, bmp, including 360-degree images
- 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');
}
}