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

以上，謝謝，希望對您有點幫助！