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

最新推荐文章于 2025-07-04 17:31:33 发布

转载最新推荐文章于 2025-07-04 17:31:33 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017033117

文章标签：

#javascript #前端 #数据库 #ViewUI

由于公司项目需要，图片与文件需要存到数据库而存本地，前端用的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后面即可，也很方便。