React-Pdf使用过程心得

上个迭代接了一个业务需求，需要在PC应用中可以直接预览pdf文件，于是在社区找了几个React组件，

A、react-pdf-js

B、react-pdf

C、React-read-pdf （移动端设备）

三款插件都使用了下，最后采用了react-pdf，相对而言它的插件功能较为强大，文档使用非常清晰，作者对issues回复也非常及时，社区也比较活跃；

一、cnpm install react-pdf --save 安装插件

二、import { Document，Page } from 'react-pdf'; 插件引入

三、<Document file="fileUrl"/> 文件引入

四、在Document里层添加<Page/>

附上代码：

<Documenttitle={pdfTitle || undefined}file={pdfUrl}onLoadSuccess={this.onDocumentLoadSuccess}loading="努力加载中..."renderMode="canvas"options={{cMapUrl: 'cmaps/',cMapPacked: true,}}><Page pageNumber={pageNumber} width={720} loading="努力加载中..."renderMode="canvas"renderInteractiveForms={true}/></Document>

注意点：

1、因为是在webpack中的，所以导入方式需要

import { Document } from 'react-pdf/dist/entry.webpack';

2、控制台报警告或pad文件显示不完整，内容缺失：

Warning: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided

需要支持非拉丁字符，下载插件

npm install copy-webpack-plugin --save-dev

在webpack中配置，引入：

import CopyWebpackPlugin from 'copy-webpack-plugin';

plugins配置：

new CopyWebpackPlugin([{from: 'node_modules/pdfjs-dist/cmaps/',to: 'cmaps/'},
]),

最后在组件的Document中添加配置：

<Documentoptions={{cMapUrl: 'cmaps/',cMapPacked: true,}}
/>

配置支持插件方式也有另外一种，它提供的cdn的远程资源包也可以使用，

cMapUrl: `//cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/cmaps/`,

。

如果还是不能预览，需要看下pdf中原件是否存在交互式表单，如果是按照作者建议是需要开启强制渲染模式renderInteractiveForms={true}

强调下，react-pdf的github上的接口文档中，提供了很多的属性设置以及回调函数以供开发者使用，https://github.com/wojtekmaj/react-pdf

当然了，翻页跳页功能是需要自行拓展的，直接控制pageNumber的值就好了，

以上，谢谢，希望对您有点帮助！

React-Pdf使用过程心得相关推荐

面试官:说说react的渲染过程
面试官:说说react的渲染过程 hello,这里是潇晨,大家在面试的过程中有没有遇到过一些和react相关的问题呢,比如面试官让你说说react渲染的过程,这到题目比较开放,也比较考验大家对reac ...
源码解析 React Hook 构建过程
2018 年的 React Conf 上 Dan Abramov 正式对外介绍了React Hook,这是一种让函数组件支持状态和其他 React 特性的全新方式,并被官方解读为这是下一个 5 年 R ...
记录一次react项目配置过程
1.为什么要配置react而不是脚手架因为要知其然,最好还要知其所以然! 2.配置对象 webpack webpack-dev-server babel eslint 3.配置过程 1.webpac ...
python实验过程心得体会_python学习心得
python学习心得什么是编程编程是编写程序代码,通过计算机将程序代码与现实事物抽样转换解决生活中的问题,还原生活场景. 怎么快速理解编程? 编程最重要的是对事物转化的思想,语法只是一种基本的技能 ...
React pdf 电子书
ReactNative用javascript开发移动应用中文PDF版 27.4MB http://qunying.jb51.net:81/201608/books/reactnative_jb51. ...
python实验过程心得体会_web实训心得体会
篇一:JAVAWEB实训心得体会 jsp+servlet+mysql 论坛项目实训总结实训人: 程路峰学号:11103303 通过为期10天的实训,我学习了很多关于java web的知识.在老师 ...
记录一次详细在线加密PDF解密过程
发现了一个在线很好的教材PDF,但是阅读时候加密了,咋办?简单分析,解密该加密的在线PDF文档,并且下载解密. 事件尝试过程成功事件在阅读一个在线PDF时候,出现了下面的情况.已经被加密了, ...
PDF.js使用心得
一次在开发微信预览保单的时候所使用到的,由于安卓手机浏览器不支持解析PDF,所以才用了PDF.js来解析PDF并展示. pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无 ...
太极创客meArm制作过程心得
首先还是感谢感谢太极创客团队免费开放的Arduino学习教程,这是我现阶段离不开的最好的保姆级的没有之一的教学网站,网站上对编程语言也有很系统很详细的介绍,还有实例,真的暖心又实用. OK言归正传, ...
react pdf预览
pdf预览很强大的插件是pdf.js,这是原生js实现的插件,能兼容大部分浏览器,对于它的使用方法,在传统的web项目中就是viewer.html?file="文件名称",但是对于 ...

React-Pdf使用过程心得

React-Pdf使用过程心得相关推荐

最新文章

热门文章