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/> 

附上代码：

<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的值就好了，

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