一、前言
由于项目需要实现文件的预览功能,通过查询百度找到了一个组件,就是react-file-viewer,其官方API中描述可支持文件格式有以下格式:
图片:png,jpeg,gif,bmp,包括360度图片
pdf格式
CSV
xslx
docx
视频:mp4,webm
音频:mp3
但是经过我的测试发现它可以打开docx,xslx格式的文件,pdf格式的文件有时能打开有时打不开的(我刚开始测试的时候pdf格式的文件就一直打不开,但是当项目写完测试的时候发现又能打开pdf格式的文件了)。所以当时开发的时候就选择了用react-pdf-js插件来打开pdf。
二、使用react-file-viewer实现docx,xlsx文件的预览
1.安装react-file-viewe
npm install react-file-viewer
2.组件中引入react-file-viewe
//react文件预览支持docx,xlsx
import FileViewer from 'react-file-viewer';
3.使用
render() {
const {
type } = this.state;
return (<React.Fragment>
<div style={
{
display: this.state.fileState }} className={
styles.filesBox}>
<div className={
styles.fileTop}>
<span>预览</span>
<img className={
styles.x} src={
x} onClick={
this.closeFile.bind(this)} alt="" />
</div>
{
type == 'docx' ?//判断类型是否为docx
<div className={
styles.flieContent}>
<FileViewer
fileType='docx'//文件类型
filePath={
xiangmu} //文件地址
/>
</div>
: type == 'xlsx' ?//判断类型是否为xlsx
<div className={
styles.flieContent}>
<FileViewer
fileType='xlsx'//文件类型
filePath={
ceshi} //文件地址
/>
</div>
: ''
}
</div>
</React.Fragment>)
}
css
.filesBox{
width: 40%;
height: 86%;
display: flex;
left: 25%;
background: #fff;
justify-content: center;
align-items: center;
position: absolute;
border