使用react-pdf预览pdf_react pdf预览-程序员宅基地

技术标签： react.js react

在使用umi构建的react项目中如何实现预览pdf ？？如果PDF中包含印章该如何使印章展示出来？？？

1.安装依赖

yarn add react-pdf

react-pdf: https://github.com/wojtekmaj/react-pdf

我项目中使用的react-pdf版本为5.2.0。

2. 加载workerSrc

imprt { pdfjs } from 'react-pdf';
在app.ts文件中指定workerSrc加载资源路径：pdfjs.GlobalWorkerOptions.workerSrc = https://xxx.pdf.worker.min.js;，umi会在运行时会自动执行app.ts。

需要注意的是资源版本必须与react-pdf版本匹配，我项目总使用的是2.5.207: 对应使用https://cdn.bootcdn.net/ajax/libs/pdf.js/2.5.207/pdf.worker.js

3. 基本使用

// 导入组件
import {
     Document, Page } from reacf-pdf;

// 保存PDF当前页数，用于实现翻页
const [current, setCurrent] = useState(1);
// 总页数，用于实现翻页
const [total, setTotal] = useState();

// render
<Pagination simple current={
    current} total={
    total} onChange={
    (current) => setCurrent(page)}
<Document
	option={
    {
    
		cMapUrl:"“https://xxx.cmaps/", // 预定义的 Adobe CMap 所在的 URL。包括尾部斜杠。
		cMapPacked: true, // 指定 Adobe CMap 是否为二进制打包。
	}}
	renderMode="canvas" // 定义文档呈现形式
	file={
    pdfUrl} // pdf，可以是一个URL、File、或者包含url、data、range、httpHeaders的对象
	onLoadSuccess={
    ({
     numPages }) => setTotal(pageNumber)}
>
	<Page
		pageNumber={
    nowPage} //当前页码
	/>
</Document>

必须指定 CMap 的基础参数： cMapUrl 和 cMapPacked

您需要从 pdfjs-dist 复制 cMaps（React-PDF 的依赖项 - 如果您安装了 React-PDF，它应该在您的 node_modules 中）。 cMaps 位于 pdfjs-dist/cmaps。

4. 显示印章

客户在浏览器中使用开源PDF.JS插件预览签署后的PDF文件时会遇到无法显示电子签章的情况，这是因为PDF.JS因无法进行校验电子签名故而默认隐藏了电子签章。
如果需要显示电子签章则需要在pdf.worker.js中找到以下代码并进行注释

if (data.fieldType === "Sig") {
    
	data.filedValue = null;
	//this.setFlags(_util.AnnotationFlag.HIDDEN); //注释此行后可显示电子签章
}

或者某些版本的PDF.JS需要在pdf.worker.js中找到如下代码并进行注释

var parent = Annotation.prototype; 
Util.inherit(WidgetAnnotation,Annotation,{
    
	isViewable:
	function WidgetAnnotation_isViewable(){
     
	// 注释掉if判断，不让它返回false
	/* if (this.data.fieldType === 'Sig') {
        warn('unimplemented annotation type: Widget signature');
        return false;
      }*/
	return parent.isViewable.call(this); 
	} 
});

最后看下效果图

在这里插入图片描述

本文链接：https://blog.csdn.net/qq_44704740/article/details/125696869

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

python语言中1010的二进制表示_Python语言中的按位运算-程序员宅基地

文章浏览阅读2.3k次。(转)位操作是程序设计中对位模式或二进制数的一元和二元操作. 在许多古老的微处理器上, 位运算比加减运算略快, 通常位运算比乘除法运算要快很多. 在现代架构中, 情况并非如此:位运算的运算速度通常与加法运算相同(仍然快于乘法运算).简单来说，按位运算就把数字转换为机器语言——二进制的数字来运算的一种运算形式。在计算机系统中，数值一律用补码来表示(存储)。Python中的按位运算符有：左移运算符(&..._位串1010的二进制

使用windows11 + linux 虚拟机，端口被占用_wsl 端口占用-程序员宅基地

文章浏览阅读560次。解决windows分配Linux端口太靠前的问题。_wsl 端口占用

第一章：什么是软件架构？_allocation structures-程序员宅基地

文章浏览阅读1k次。What Software Architecture Is系统的软件体系结构是指系统所需的一组结构，包括软件元素、它们之间的关系以及两者的属性。结构是由一个关系集合在一起的一组元素。We call runtime structures component-and-connector (C&C) structures.Allocation structures describe the ma..._allocation structures

求链式线性表的倒数第K项_c语言求链式线性表的倒数第k项分数 12 作者 ds课程组单位浙江大学给定一系列-程序员宅基地

文章浏览阅读565次。求链式线性表的倒数第K项给定一系列正整数，请设计一个尽可能高效的算法，查找倒数第K个位置上的数字。输入格式:输入首先给出一个正整数K，随后是若干非负整数，最后以一个负整数表示结尾（该负数不算在序列内，不要处理）。输出格式:输出倒数第K个位置上的数据。如果这个位置不存在，输出错误信息NULL。输入样例:4 1 2 3 4 5 6 7 8 9 0 -1输出样例:7标程单链表版#include<map>#include<list>#include<cm_c语言求链式线性表的倒数第k项分数 12 作者 ds课程组单位浙江大学给定一系列

使用YOLOX进行物体检测_yolox 刀具-程序员宅基地

文章浏览阅读1.4k次。YOLOX 是旷视开源的高性能检测器。旷视的研究者将解耦头、数据增强、无锚点以及标签分类等目标检测领域的优秀进展与 YOLO 进行了巧妙的集成组合，提出了 YOLOX，不仅实现了超越 YOLOv3、YOLOv4 和 YOLOv5 的 AP，而且取得了极具竞争力的推理速度。其中YOLOX-L版本以 68.9 FPS 的速度在 COCO 上实现了 50.0% AP，比 YOLOv5-L 高出 1.8% AP！还提供了支持 ONNX、TensorRT、NCNN 和 Openvino 的部署版本，本文将详细介绍如_yolox 刀具

一文搞懂 UML 类图！！！_uml类图-程序员宅基地

文章浏览阅读2.9k次，点赞27次，收藏45次。统一建模语言UML类图是一种用于描述系统结构的图形化工具。它以类和对象为基础，主要用于表示系统中的类、接口、继承关系、关联关系等元素，以及它们之间的静态结构和关系。在本文中，将深入介绍UML类图的基本元素关系类型以及如何创建一个简单而有效的类图。类图以反映类的结构(属性、操作)以及类之间的关系为主要目的，描述了软件系统的结构，是一种静态建模方法。类图用来描述系统中有意义的概念，包括具体的概念、抽象的概念、实现方面的概念等，是对现实世界中事物的抽象。_uml类图

随便推点

重装Office后打开outlook和excel提示找不到VCRUNTIME140_1.dll的解决办法_打开excel提示vcruntime140-程序员宅基地

文章浏览阅读1.7w次，点赞3次，收藏8次。最近发现有的电脑重装Office后打不开outlook和excel，提示找不到VCRUNTIME140_1.dll。如下图所示VCRUNTIME140_1.dll是C++ 2015的一个组件，一般我直接用DirectX Repair运行库修复工具，开启强力修复，更新C++解决。如果不行的话直接卸载C++再重新安装也是可以的。..._打开excel提示vcruntime140

docker overlay网络详解-程序员宅基地

文章浏览阅读1w次，点赞10次，收藏36次。之前我们学习的网络是单台主机的网络通讯方案，这里我们学习的是跨跨主机。我们原生的docker跨主机方案有macvlan和overlay，这里我们重点学习overlay第三方网络插件有flannel，calico，weave网络。docker网络之所以这么活跃，是因为网络部分的代码单独抽离出来成为docker的网络库，即libnetwork。为了标准化网路驱动的开发步骤和支持各种网络驱动，libnetwork中使用了CNM（container network model），CNM定义了构建容器_docker overlay