pdf预览组件react-pdf,pdfjs-dist

   "react": "^17.0.2" 

1.react去预览pdf文件,并且这个组件可以在移动端展示,但要注意安装版本

 "react-pdf": "^5.7.2"

直接上代码了,做了一个两页的分页,因为放在移动端有个问题,有个文件全部加载手机就卡死了,但这个分页也没解决问题,换了个文件就是好的,代码能优化的地方比较多,自行优化:

import React, { useState, useEffect, useCallback } from 'react';
import { Page, pdfjs } from "react-pdf";
import { Document } from 'react-pdf/dist/esm/entry.webpack';pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;const PdfViewer = ({ file }: any) => {const [page_jsx, set_page_jsx]: [any[], React.Dispatch<React.SetStateAction<any[]>>] = useState<any[]>([]);const [totalPages, setTotalPages]: [number, React.Dispatch<React.SetStateAction<number>>] = useState(0);const [end_num, set_end_num]: [any, React.Dispatch<React.SetStateAction<any>>] = useState(6);const viewMore = useCallback(() => {let current_end_num = end_num + 5 <= totalPages ? end_num + 5: totalPages;set_end_num(current_end_num);const array = [];for (let i = current_end_num - 6; i < current_end_num; i++) {array.push(i);}let pageJsx = array?.map((a: any) => <Page scale={.5} key={`page_${a}`} pageNumber={a + 1}/>);set_page_jsx((jsx_arr: any[]) => [...jsx_arr, ...pageJsx]);}, [end_num, totalPages, set_end_num, set_page_jsx])useEffect(() => {const array = [];if (end_num === 6) {for (let i = totalPages < 6 ? 0: end_num - 6; i < (totalPages < 6 ? totalPages: end_num); i++) {array.push(i);}let pageJsx = array?.map((a: any) => <Page scale={.5} key={`page_${a}`} pageNumber={a + 1}/>);set_page_jsx((jsx_arr: any[]) => [...jsx_arr, ...pageJsx]);}}, [end_num, set_page_jsx, totalPages])return (<div style={{ width: '100%', height: '100vh', overflow: 'auto' }}><DocumentclassName={"pdf-content"}file={file}onLoadSuccess={({ numPages }: any) => setTotalPages(numPages)}>{page_jsx?.map((page: any) => page)}{totalPages > end_num && <div style={{height: '40px', lineHeight: '40px', textAlign: 'center'}} onClick={() => viewMore()}>View more</div>}</Document></div>);
};export default PdfViewer;

2.   pdfjs-dist

"pdfjs-dist": "^2.5.207",这个插件的版本尤其要记录下,网上查了好多,只把代码放上去,如果版本不对,引入文件路径是不存在的,那么还是直接放代码吧,如第一种方法自行优化下:

import React, { useCallback, useEffect, useRef, useState } from 'react';
const pdfjsLib = require('pdfjs-dist/es5/build/pdf.js');pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`;const PdfViewer = ({ file }: any) => {const [totalPages, setTotalPages]: [number, React.Dispatch<React.SetStateAction<number>>] = useState(0);const [end_num, set_end_num]: [any, React.Dispatch<React.SetStateAction<any>>] = useState(6);const canvasRefs: any = useRef([]);const pageNums: any = useRef([]);const renderPage = useCallback(async (pdf: any, endNum: any) => {pageNums.current = new Array(endNum)?.fill(0).map((_, i) => i + 1);// 渲染每一页for (let i = totalPages < 6 ? 1: endNum - 5; i <= (totalPages < 6 ? totalPages: endNum); i++) {const page = await pdf.getPage(i);const viewport = page.getViewport({ scale: 1.5 });// 创建canvas元素const canvas = document.createElement('canvas');const context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;// 将canvas添加到DOM中const canvasContainer: any = document.getElementById('pdf-container');canvasContainer.appendChild(canvas);// 存储canvas的引用以便后续操作canvasRefs.current[i - 1] = canvas;// 渲染页面const renderContext = {canvasContext: context,viewport: viewport};await page.render(renderContext);}}, [totalPages])useEffect(() => {async function loadPdf() {const loadingTask = pdfjsLib.getDocument(file);const pdf: any = await loadingTask.promise;// 获取总页数const numPages: any = pdf.numPages;setTotalPages(numPages);renderPage(pdf, end_num);}if (file && end_num === 6) {loadPdf();}}, [file, end_num, renderPage])return (<><div id="pdf-container">{/* 在这里,canvas元素将被动态添加到这个容器中 */}</div>{totalPages > end_num && <div onClick={async () => {if (end_num < totalPages) {let current_end_num = end_num + 5 <= totalPages ? end_num + 5: totalPages;set_end_num(current_end_num);const loadingTask = pdfjsLib.getDocument(file);const pdf: any = await loadingTask.promise;renderPage(pdf, current_end_num);}}} style={{height: '40px', lineHeight: '40px', textAlign: 'center'}}>View more</div>}</>);
};export default PdfViewer;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/790603.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

绩效考核存在合理性、公平性、客观性吗?

目录 一、绩效考核流于形式&#xff1a;没有实际考核过 二、考核结果的确定: 主管一人说了算 三、考核结果&#xff1a; 与绩效奖金挂钩吗&#xff1f; 四、考核的滥用&#xff1a;成为公司排挤迫使员工离职的手段 五、公司说&#xff1a; 让你滚蛋&#xff0c;谁还会发你奖…

SpringBoot(48)-使用 SkyWalking 进行分布式链路追踪

Spring Boot&#xff08;48&#xff09;- 使用 SkyWalking 进行分布式链路追踪 介绍 在分布式系统中&#xff0c;了解各个服务之间的调用关系和性能表现是非常重要的。SkyWalking 是一款开源的分布式系统监控与分析平台&#xff0c;能够帮助我们实现分布式系统的链路追踪、性…

使用minikube安装使用单机版K8S(docker)

前置&#xff1a;作为一个开发&#xff0c;工作之余想玩一下k8s&#xff0c;但是搭建成本太高&#xff0c;所以就找到了minikube这个工具&#xff0c;快速搭建单机版k8s&#xff0c;下面是个人搭建流程&#xff0c;基于centos7&#xff0c;仅供参考。 1.下载kubectl&#xff0…

ES学习日记(十)-------Java操作ES之连接客户端

Elasticsearch有两种连接方式: transport、rest。transport 通过TCP方式访问ES(只支持iava)&#xff0c;rest 方式通过http API 访问ES(没有语言限制)。 ES官方建议使用Iest 方式&#xff0c;transport 在7.8 版本中不建议使用&#xff0c;在8.x的版本中废弃。你可以用Java客户…

Java23种设计模式

本文主要是对Java中一些常用的设计模式进行讲解 后期会进行不断的更新&#xff0c;欢迎浏览 23种设计模式 创建型模式&#xff0c;共五种&#xff1a;工厂方法模式、抽象工厂模式、建造者模式、原型模式、单例模式。结构型模式&#xff0c;共七种&#xff1a;适配器模式、桥接…

使用 Flume 将 CSV 数据导入 Kafka:实现实时数据流

使用 Flume 将 CSV 数据导入 Kafka&#xff1a;实现实时数据流 文介绍了如何使用 Apache Flume 将 CSV 格式的数据从本地文件系统导入到 Apache Kafka 中&#xff0c;以实现实时数据流处理。通过 Flume 的配置和操作步骤&#xff0c;我们可以轻松地将数据从 CSV 文件中读取并发…

RT-Thread下使用NTP服务器获取时间并同步到硬件RTC

单片机:STM32F407VET6 实现功能:通过ntp服务器获取时间并同步到硬件RTC上 1.配置NTP相关参数 1.1打开netutils相关软件包 1.2 关闭软件RTC相关配置 参考资料:RT-Thread中使用NTP自动更新时间_rtthread ntp-CSDN博客 2.配置硬件RTC 2.1 在ENV里面使能硬件RTC 2.2使用STM32C…

日志服务 HarmonyOS NEXT 日志采集最佳实践

作者&#xff1a;高玉龙&#xff08;元泊&#xff09; 背景信息 随着数字化新时代的全面展开以及 5G 与物联网&#xff08;IoT&#xff09;技术的迅速普及&#xff0c;操作系统正面临前所未有的变革需求。在这个背景下&#xff0c;华为公司自主研发的鸿蒙操作系统&#xff08…

神经网络设计:(block)块视角和(layer)层视角

1. 神经网络设计架构考虑更粗粒度的块&#xff08;block&#xff09; 在神经网络设计中&#xff0c;采用更粗粒度的块&#xff08;block&#xff09;结构是一种提高计算效率、减少资源消耗以及优化网络性能的设计策略。粗粒度的块通常指的是将多个连续的层或子网络模块组合在一…

idea maven 打包 内存溢出 报 GC overhead limit exceeded -> [Help 1]

idea 使用maven打包 报GC overhead limit exceeded -> [Help 1] 解决方法&#xff1a; 打开settings -> 点开如同所示 将 vm Options 参数 设为 -Xmx8g

golang微服务框架特性分析及选型

目录 一、微服务框架特性&#xff08;10个&#xff09;包括&#xff1a;Istio、go-zero、go-kit、go-kratos、go-micro、rpcx、kitex、goa、jupiter、dubbo-go、tarsgo 1、特性及使用场景2、比较 二、web框架特性&#xff08;7个&#xff09;包括&#xff1a;gin、fiber、beego…

双链表算法库构建

v1.0 : 模仿贺利坚老师, 进行基本构建 贺老师链接:数据结构之自建算法库——双链表_双链表画法-CSDN博客 我的解析博客:双链表的存储结构_p (*q)->next;-CSDN博客 库函数: //(1)初始化双链表 void InitDoubleLinkList(DoubleLinkList *&L);//(2)输出双链表 void Dispal…

Pots(DFS BFS)

//新生训练 #include <iostream> #include <algorithm> #include <cstring> #include <queue> using namespace std; typedef pair<int, int> PII; const int N 205; int n, m; int l; int A, B, C; int dis[N][N];struct node {int px, py, op…

解决虚拟机centos8无法连接外网,ping: www.baidu.com: 未知的名称或服务

设置的虚拟机刚开还是好好的&#xff0c;改完hostname重启后就连不上网了 ping百度时显示未知的名称或服务。 1.找到虚拟机的IP(NAT模式的) 编辑-->虚拟网络编辑器 可以看到我的子网IP为192.168.47.0 2.编辑网络配置文件 vim /etc/sysconfig/network-scripts/ifcfg-XXXXX…

ZCC5600 锂电转干电池充放电管理芯片 低功耗

特性 内置多档位电压电流调节的线性充电器 ■ 16V 输入耐压 ■ 充电电流和充电电压外部电阻调节 ■ 支持 4.2V/4.3V/4.35V/4.4V 锂电池充电 ■ 400mA/600mA/800mA/1000mA 可配置充电电流 ■ 符合锂电池充电 JEITA 标准&#xff0c;根据电池温度和输入电压智能调节充电电压和充电…

SpringCloud学习(1)-consul

consul下载安装及使用 1.consul简介 Consul是一种开源的、分布式的服务发现和配置管理工具&#xff0c;能够帮助开发人员构建和管理现代化的分布式系统。它提供了一套完整的功能&#xff0c;包括服务注册与发现、健康检查、KV存储、多数据中心支持等&#xff0c;可以帮助开发人…

Redis的高可用(主从复制、哨兵模式、集群)的概述及部署

目录 一、Redis主从复制 1、Redis的主从复制的概念 2、Redis主从复制的作用 ①数据冗余&#xff1a; ②故障恢复&#xff1a; ③负载均衡&#xff1a; ④高可用基石&#xff1a; 3、Redis主从复制的流程 4、Redis主从复制的搭建 4.1、配置环境以及安装包 4.2所有主机…

设计模式-行为型-中介者模式-Mediator

同事抽象类 public abstract class Colleague {private Mediator mediator;public abstract void play(String data); } 视频同事 public class AudioColleague extends Colleague {public void play(String data) {System.out.println("画外音是&#xff1a;" d…

嵌入式开发中状态模式实现

文章目录 状态模式代码实现代码解释小结 状态模式 状态模式&#xff08;State Pattern&#xff09;是一种行为设计模式&#xff0c;它允许对象在内部状态改变时改变它的行为。在嵌入式系统中&#xff0c;状态模式尤其适用于那些根据外部事件或内部条件频繁改变状态并且每种状态…

最新408试卷分析+备考经验分享

408出题再糟糕&#xff0c;你是不是还是要考&#xff1f; 别管出题人出多刁钻的题&#xff0c;大家拿到的卷子都是一样的&#xff0c;要难就都难&#xff0c;要刁钻就一起g... 所以再潜心钻研出题规律或出题套路&#xff0c;不如多花些时间去多复习巩固几遍知识点&#xff01…