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

Alfred 发布于2019-07-01 10:56 / 2752人阅读

摘要：由于公司项目需要，图片与文件需要存到数据库而存本地，前端用的，后端是接口的方式，只能选择这种方式，而且也方便可以存各种格式。下安装官网大家可以点进去，然后里面有介绍安装方法如何使用。

由于公司项目需要，图片与文件需要存到数据库而存本地，前端用的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 = ;
            if(previous === 1){
                previousButton = ;
            }
            let nextButton = ;
            if(previous === next){
                nextButton = ;
            }

            return {previousButton}{nextButton}  第{previous}页 共{next}页;
        }
                
        return(
                    
        )
    }
}

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

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 是从数据库中取出来的图片字段取到的数据

如果要显示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后面即可，也很方便。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/29658.html

使用jquery-webcam插件，实现人脸采集并转base64

摘要：项目需求在或浏览器下，调用电脑摄像头确保使用的是笔记本电脑，或者摄像头功能正常使用的台式机，进行人脸图像采集预览，并将图片的码传入到后台进行后续操作。该适用于和以上，以下版本的未测试。前期插件准备版本以上即可地址作者主页地址这里。项目需求：在ie或chrome浏览器下，调用电脑摄像头（确保使用的是笔记本电脑，或者摄像头功能正常使用的台式机），进行人脸图像采集预览，并将图片的base6...

chenatu 2019-08-20 18:18 评论0 收藏0
使用jquery-webcam插件，实现人脸采集并转base64

摘要：项目需求在或浏览器下，调用电脑摄像头确保使用的是笔记本电脑，或者摄像头功能正常使用的台式机，进行人脸图像采集预览，并将图片的码传入到后台进行后续操作。该适用于和以上，以下版本的未测试。前期插件准备版本以上即可地址作者主页地址这里。项目需求：在ie或chrome浏览器下，调用电脑摄像头（确保使用的是笔记本电脑，或者摄像头功能正常使用的台式机），进行人脸图像采集预览，并将图片的base6...

cnio 2019-08-01 17:15 评论0 收藏0
zx-editor 移动端（HTML5）富文本编辑器，可与原生App混合(hybrid)开发

摘要：移动端文档富文本编辑器，支持图文混排引用大标题无序列表，字体颜色加粗斜体。可用于独立项目开发，也可以用于与原生混合开发。，图片文件最大尺寸限制，单位，默认，编辑器左右内边距，默认像素，是否显示底部工具栏图片标签连接添加等图标。 ZxEditor 移动端HTML文档（富文本）编辑器，支持图文混排、引用、大标题、无序列表，字体颜色、加粗、斜体。可用于独立web项目开发，也可以用于与原生A...

lansheng228 2019-08-23 10:47 评论0 收藏0