资讯专栏INFORMATION COLUMN

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

Alfred / 2726人阅读

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

由于公司项目需要,图片与文件需要存到数据库而存本地,前端用的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 评论0 收藏0
  • 使用jquery-webcam插件,实现人脸采集并转base64

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

    cnio 评论0 收藏0
  • zx-editor 移动端(HTML5)富文本编辑器,可原生App混合(hybrid)开发

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

    lansheng228 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<