React 可以在线预览word,pdf,docx格式的文件

React 可以在线预览word,pdf,docx格式的文件,下面往下看

我也不知道为什么要做这个功能,查了百度很久才找到了一个组件、react-file-viewer 下面上代码


1、首先使用npm/yarn/cnpm下载这个包

npm install react-file-viewer

2、在组件中引入这个包

//引入这个组件
import FileViewer from 'react-file-viewer';

3、 使用这个组件

render() {
        let { top, file } = this.state;
        let { play, sonstate } = this.props
        var index = file.lastIndexOf(".");
        var type = file.substr(index + 1);
        return (
            <div>
                <div className="top" style={{ display: play ? 'flex' : 'none' }}>
                    <div className="all" >
                        <div className="allname">
                            <div className="topall"><Button style={{ opacity: '0' }}>关闭</Button><div></div><Button onClick={() => {
                                sonstate(false)
                                this.setState({ top: false, file: '' })
                            }}>关闭</Button>
                            </div>
                            {/* 使用这个组件 */}
                            <FileViewer fileType={type}
                                filePath={file}
                                onError={this.onError}
                                errorComponent={Error}
                                unsupportedComponent={Error}
                            />
                        </div>
                    </div>
                </div>
            </div>
        )
    }

3、注意这个组件的使用规则

请注意,此模块最适用于16+反应。如果您使用React <16,则可能需要使用0.5版本。npm install react-file-viewer@0.5.0。

有一个主要的React组件FileViewer,它采用以下道具:

fileTypestring:要显示的资源类型(例如,支持的文件格式之一’png’)。传入不受支持的文件类型将导致显示unsupported file type消息(或自定义组件)。

filePath string:FileViewer显示的资源的url。

onErrorfunction [可选]:在文件查看器获取或呈现所请求资源时出现错误时将调用的函数。您可以在此处传递日志记录实用程序的回调。

errorComponent react元素[可选]:在出现错误时呈现的组件,而不是与react-file-viewer一起打包的默认错误组件。

unsupportedComponent react元素[可选]:在不支持文件格式的情况下呈现的组件。

4.注意这个组件的所支持的格式

  • 图像:png,jpeg,gif,bmp,包括360度图像
  • PDF格式
  • CSV
  • XSLX
  • DOCX
  • 视频:mp4,webm
  • 音频:mp3

ps:当然大家也可以看这个链接https://www.npmjs.com/package/react-file-viewer

发布了5 篇原创文章 · 获赞 4 · 访问量 4253
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览