上个迭代接了一个业务需求,需要在PC应用中可以直接预览pdf文件,于是在社区找了几个React组件,
C、React-read-pdf (移动端设备)
三款插件都使用了下,最后采用了react-pdf,相对而言它的插件功能较为强大,文档使用非常清晰,作者对issues回复也非常及时,社区也比较活跃;
一、cnpm install react-pdf --save 安装插件
二、import { Document,Page } from 'react-pdf'; 插件引入
三、<Document file="fileUrl"/> 文件引入
四、 在Document里层添加<Page/>
附上代码:
<Document
title={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中添加配置:
<Document options={{ 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的值就好了,
以上,谢谢,希望对您有点帮助!