React web项目展示PDF系列问题解决

基于antd pro的脚手架，React web项目，使用react-pdf或者react-pdf-js都没有问题。

1. 第一个小问题：如何一页页地显示，而不是翻页？其实挺简单：

• 使用react-pdf：

...
import { Document, Page } from 'react-pdf';
...
class Xxx extends PureComponent {
  state = {
    ...,
    numPages: null,
  };

  onDocumentLoadSuccess = ({ numPages }) => {
    this.setState({ numPages });
  };

  render() {
    ...
    return (
      
        
          
          {this.state.numPages > 1 && directlyRenderPdfPage(this.state.numPages)}
        
      
    );
  };

这个 directlyRenderPdfPage 可以做成通用函数的：

export const directlyRenderPdfPage = pages => {
  const x = [];
  for (let i = 2; i <= pages; i++)
    x.push();
  return x;
};

• 使用react-pdf-js:
  这时候没有了父元素，就直接在下绘制多个元素：

...
import PDF from 'react-pdf-js';
...
class Xxx extends PureComponent {
  state = {
    ...,
    numPages: null,
  };

  onDocumentComplete = (pages) => {
    this.setState({ numPages: pages });
  };

  render() {
    ...
    // 没有了父元素，这些属性需要重复出现在每个元素上，所以拉出来定义
    const ps = {
      file: pdfUrl,
      cMapUrl: 'https://unpkg.com/[email protected]/cmaps/',
      cMapPacked: true,
      workerSrc: '/pdf.worker.js',
    };
    return (
      
        
        {this.state.numPages > 1 && directlyRenderPdf(this.state.numPages, ps)}
      
    );
  };

这个 directlyRenderPdf 稍微有点差异，要把那些属性传进去：

export const directlyRenderPdf = (pages, moreProps) => {
  const x = [];
  for (let i = 2; i <= pages; i++)
    x.push();
  return x;
};

2. 第二个问题就是字符不能显示了。设置 cMapUrl、cMapPacked 两个属性如上面代码，即可解决。
3. 第三个问题是加在PDF文档中的签名不能显示出来。解决此问题时参考了网上的一些贴子，是需要定制修改pdf.worker.js文件。
   起初只引入了react-pdf，发现请求这个文件竟然是从自己的web服务地址，但无法下载。接着引入了react-pdf-js，又发现在node_modules下有一个pdfjs-dist目录，其中lib子目录里赫然有pdf.worker.js，实际打开却不是，仍然只是个入口文件。不过，这时候发现Network请求里有pdf.worker.js能下载的地址了！
   下载后，把这个文件放在项目根目录下的public文件夹里，这样就能够以上面代码中（/pdf.worker.js）的路径访问了。查找其中AnnotationFlag.HIDDEN的字符，我的版本是在28687行，把那边都注释了，就OK啦！

    if (data.fieldType === 'Sig') {
      // data.fieldValue = null;

      // _this2.setFlags(_util.AnnotationFlag.HIDDEN);
    }

4. 本来搞到这里就结束了，不管react-pdf还是react-pdf-js，解决问题就行。然而编译发布的版本，并且是拆解js文件的那种，用后者会报一个Invalid Assignment错误，以我目前道行不能解决。所以最后采用了react-pdf，并且移除了react-pdf-js依赖。不过没有后者弄一下，可能下载不到pdf.worker.js。

如有错漏，恳请同道指正。