react-pdf-js展示问题

试过好几个PDF预览插件,可能是太笨,官方文档看不懂, 一开始我以为直接require(“动态地址”)就ok,但是只能引入静态的PDF文件,后来直接把返回的文件在后台转换成base64格式,set进一个字段,前台PDF插件内的 file={“data:application/pdf;base64,”+this.props.datum.base64}。"data:application/pdf;base64,"这个一定要加,类似于HTTP请求的请求头,告知插件 是以什么格式解析数据
代码在此,分页都是ok的,只要你传入一个base64数据就ok。

import React, { PureComponent } from "react";
import { connect } from "dva";
import { Pagination,} from "antd";
import PDF from 'react-pdf-js';
class MyPdfViewer extends PureComponent {
  state = { page: 1, current: 1, total: 1 };
  onDocumentComplete = totalPage => {
    this.setState({ total: totalPage });
  };

  onChange (page) {
    this.setState({
      page: page,
    });
  }
  pdfChange = page => {
    this.setState({
      page: page,
      current: page
    });
  };

  render() {
    return (
      <div>
                  <PDF
                    scale={0.9}
                    file={"data:application/pdf;base64,"+this.props.datum.base64}
                    onDocumentComplete={this.onDocumentComplete}
                    page={this.state.page}></PDF>
                  <Pagination onChange={this.pdfChange} current={this.state.current} pageSize={1}
                              total={this.state.total}/>
      </div>
    )

  }
}

效果图
在这里插入图片描述
谢谢大家的观看,有问题请留言。或者加我wx16653144918
在这里插入图片描述

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

boJIke

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值