在使用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)}
<Documentoption={{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)}
><PagepageNumber={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); }
});

最后看下效果图

使用react-pdf预览pdf相关推荐

一个使用js做的一个PDF预览PDF标注（在线批注）工具
一个使用js做的一个PDF预览&PDF标注工具核心主要使用pdf.js以及操作canvas 目前支持web端,windows端,mac端,可npm包引入项目目前支持的功能有大文件预览.缩略 ...
vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
pdf预览 pdf.js+pdfObject
1.下载pdf.js 第一步,下载源码:git clone git://github.com/mozilla/pdf.js.git (直接github下载zip 不能直接使用) 第二步 ,cd pdf ...
pdf预览-pdf.js预览base64格式的数据
前言 pdf.js框架的魅力所在,为其为HTML5实现的,无需任何本地支持,而且对浏览器的兼容性也是比较好,要求只有一个:浏览器支持HTML5就好了!(不过对于低版本的IE,就只能节哀了!) 以下是p ...
uniapp移动端H5在线预览PDF等文件实现源码及注解
uniapp移动端H5预览文件实现分为两个场景处理: (这里以预览PDF文件为示例,在线预览就是查看网络文件) 1. IOS客户端预览PDF文件 IOS客户端预览PDF文件可以通过跳转文件地址实现预览 ...
React文件预览,React实现在线预览docx，xslx，pdf格式文件
一.前言由于项目需要实现文件的预览功能,通过查询百度找到了一个组件,就是react-file-viewer,其官方API中描述可支持文件格式有以下格式: 图片:png,jpeg,gif,bmp,包括 ...
react pdf预览
pdf预览很强大的插件是pdf.js,这是原生js实现的插件,能兼容大部分浏览器,对于它的使用方法,在传统的web项目中就是viewer.html?file="文件名称",但是对于 ...
pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
PDF 预览和下载你是怎么实现的？
在开发过程中要求对 PDF 类型的发票提供预览和下载功能,**PDF** 类型文件的来源又包括 H5 移动端和 **PC 端**,而针对这两个不同端的处理会有些许不同,下文会有所提及. 针对 ...
SpringBoot(十五)_springboot实现预览pdf
最近,项目上要做个打印的东西,还要预览.我想就直接生成pdf预览,然后用户选择打印于是,昨天找了找资料.一般用itext 进行转pdf.于是我就用springboot试了试,代码比较简单,现在只是简 ...

使用react-pdf预览pdf