React-pdf-js插件使用与base64显示图片与文件

由于公司项目需要,图片与文件需要存到数据库而存本地,前端用的react,后端 是接口的方式,只能选择base64这种方式,而且也方便可以存各种格式。

1.React下react-pdf-js安装
官网

大家可以点进去,然后里面有介绍安装方法如何使用。

2.然后页面显示如下:

引入
import PDF from 'react-pdf-js';
export default class Document extends Component{
    construtor(){
        super();
        this.state = {}
    }
     onDocumentComplete = (pages) => {
        console.log(pages); //总页
        this.setState({ page: 1, pages });
    }
    handlePrevious = () => {
        this.setState({ page: this.state.page - 1 });
    }

    handleNext = () => {
        this.setState({ page: this.state.page + 1 });
    }
    
    render(){
        //翻页
        const pagination = (previous,next) =>{
            let previousButton = <Button onClick={this.handlePrevious}>上一页</Button>;
            if(previous === 1){
                previousButton = <Button>首页</Button>;
            }
            let nextButton = <Button onClick={this.handleNext}>下一页</Button>;
            if(previous === next){
                nextButton = <Button>最后一页</Button>;
            }

            return <span>{previousButton}{nextButton}  第{previous}页 共{next}页</span>;
        }
                
        return(
            <PDF
            file={apiManager.pdf + this.state.id}
            onDocumentComplete={this.onDocumentComplete}
            page={this.state.page}
            width={this.state.width}
            />        
        )
    }
}

然后分页有部分我没有按他官网的来我是自己写的,因为我觉得官网的写得太多了,大家可以参考一下

3.React 采用base64显示图片
由于我是做PHP的,后台接口与前端都是自己写的,这里只介绍php的方法。我也看过网上的一些方法,我不知道为什么那些人会写得那么麻烦,一条语句的问题,写了一大片,而且还有问题。代码如下:
后台代码:

        $fileHandle = fopen($thumbImageFile,"r"); //打开文件
        $file_datas = fread($fileHandle, filesize($thumbImageFile));//读取文件
        $thumbnail = chunk_split(base64_encode($file_datas));转会为base64将图片

直接使用chunk_split(base64_encode(读取的图片));直接就可以化为base64然后存到数据库,即可

React显示:

//imageSrc 是从数据库中取出来的图片字段取到的数据
<img src={'data:image/jpg/png/gif;base64,'+imageSrc} alt="pic" />

如果要显示pdf直接application/pdf;basa64,…
不过个人不建议pdf使用这种方式,因为pdf转成这种格式后,会比你上传的文件大8倍。也就是你传1M,数据库存的是8M,你要是上传100M,200M这样子的就有点儿恐怖了,对性能方面不利,图片的话大小没有改变.对于PDF可以使用其它方式,可以单独写一个接口什么的直接输出也很简单,方法如下:

header("Content-type: " . $type . ";charset=utf-8");
header('Access-Control-Allow-Headers:Origin,No-Cache,X-Requested-With,If-Modified-Since,Pragma,Last-Modified, Cache-Control,Expires,Content-Type,X-E4M-With,Authorization');
header('Access-Control-Allow-Origin:*');

echo $data;
unset($rs);

传入ID查询出来数据,然后以上面的方式显示即可,$type是类型如application/pdf,$data是数据,其它的是加的跨域的。
然后直接把这个链接直接放到pdf file后面即可,也很方便。

    原文作者:garrett
    原文地址: https://segmentfault.com/a/1190000017033117
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞