前端react-pdf-js插件显示

桃扇骨 2022-03-26 15:09 1185阅读 0赞

1，安装 react-pdf-js插件：npm install --save react-pdf-js

2，代码如下

import React, { PureComponent } from "react";
    import { connect } from "dva";
    import { Pagination,} from "antd";
    import PDF from 'react-pdf-js';
    
    class AddCourseDetails 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 className={styles.backarea}>    
            <div>
              <form>
                <table>
                  <tr>
                    <td className={styles.trname}>标准PPT(全屏)</td>
                    <td>
                      <PDF
                        file="http://it-image.walimaker.com/2019/01/02/dc39e4ea855980d3e46cc9c89c7a852b.pdf"
                        onDocumentComplete={this.onDocumentComplete}
                        page={this.state.page}></PDF>
    
                      <Pagination onChange={this.pdfChange}  current={this.state.current} pageSize={1} total={this.state.total} />
                    </td>
                  </tr>
                </table>
              </form>
            </div>
          </div>
       )
    
      }
    
    }
    function mapStateToProps(state) {
      return { ...state.addCourse };
    }
    export default connect(mapStateToProps)(AddCourseDetails);

发表评论取消回复

表情：

评论列表（有 0 条评论，1185人围观）

还没有评论，来说两句吧...

相关阅读

相关前端插件收藏夹

有些插件用了就想不起来了，整理在收藏夹太多太乱，想写点简介也不方便； > 曾做了一个类似导航页的单页面，但是维护起来还是太麻烦； > 就整理在这篇博客里，会持续...

「爱情、让人受尽委屈。」/ 2024年04月18日 13:47/ 0 赞/ 114 阅读

相关前端常用插件

第三方接口蚂蚁金服开放平台： https://docs.open.alipay.com/200/105518 微信开放平台： https://open.weixin.

谁践踏了优雅/ 2023年06月01日 12:52/ 0 赞/ 19 阅读

相关一些付费前端插件

[https://download.csdn.net/download/qq\_28198181/12461760][https_download.csdn.net_downl

谁借莪１个温暖的怀抱￠/ 2023年02月12日 14:29/ 0 赞/ 12 阅读

相关 IDEA 插件开发，显示气泡

文章目录 IDEA 插件开发，显示气泡 1、显示效果 IDEA 插件开发，显示气泡 --------------------

深碍√TFBOYSˉ_/ 2022年11月28日 15:15/ 0 赞/ 274 阅读

相关 html图片全屏显示插件,jQuery全屏内容显示插件

特效描述：jQuery 全屏内容显示插件。jQuery全屏内容显示插件代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Jquery Full Co

你的名字/ 2022年10月09日 04:57/ 0 赞/ 322 阅读

相关 sublime 前端开发插件

第一步一定是ctrl+shift+p install packages emmet：前端神器。一个可以极大提高web开发者HTML和C

分手后的思念是犯贱/ 2022年07月14日 04:00/ 0 赞/ 244 阅读

相关前端实用插件

超酷插件网站：[http://www.5iweb.com.cn/][http_www.5iweb.com.cn] 1.转盘使用的旋转插件 JqueryRotate 下载地址

た入场券/ 2022年05月22日 04:42/ 0 赞/ 349 阅读

相关前端react-pdf-js插件显示

1，安装 react-pdf-js插件：npm install --save react-pdf-js 2，代码如下 import React, { PureCom

桃扇骨/ 2022年03月26日 15:09/ 0 赞/ 1186 阅读

相关 visual studio code前端插件的安装及前端插件应用

visual studio code插件的安装及应用没有求知欲的人，就是没有翅膀的小鸟。长路漫漫，自学就会成为一种习惯。还记得刚入门的时候，对编辑器什么的简直是天方夜谭

野性酷女/ 2022年02月23日 02:54/ 0 赞/ 460 阅读

相关 idea中文显示插件

idea中文显示插件 1.打开我们的idea，我这边用的是2018.3版本的，可能跟大家的版本有所差异，但是大体上还是一致的。打开 File - Settings -p

迈不过友情╰/ 2021年12月04日 01:25/ 0 赞/ 440 阅读