基于antd pro的脚手架，React web项目，使用react-pdf或者react-pdf-js都没有问题。
- 第一个小问题：如何一页页地显示，而不是翻页？其实挺简单：
- 使用react-pdf：
...
import { Document, Page } from 'react-pdf';
...
class Xxx extends PureComponent {
state = {
...,
numPages: null,
};
onDocumentLoadSuccess = ({ numPages }) => {
this.setState({ numPages });
};
render() {
...
return (
<Fragment>
<Document
options={{
cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/',
cMapPacked: true,
workerSrc: '/pdf.worker.js', // 这个怎么来的，见后面叙述
}}
file={this.pdfUrl}
onLoadSuccess={this.onDocumentLoadSuccess}
>
<Page pageNumber={1} size="A4" />
{this.state.numPages > 1 && directlyRenderPdfPage(this.state.numPages)}
</Document>
</Fragment>
);
};
这个 directlyRenderPdfPage 可以做成通用函数的：
export const directlyRenderPdfPage = pages => {
const x = [];
for (let i = 2; i <= pages; i++)
x.push(<Page pageNumber={i} key={`x${i}`} size="A4" />);
return x;
};
- 使用react-pdf-js:
这时候没有了<Document>父元素，就直接在<Fragment>下绘制多个<PDF>元素：
...
import PDF from 'react-pdf-js';
...
class Xxx extends PureComponent {
state = {
...,
numPages: null,
};
onDocumentComplete = (pages) => {
this.setState({ numPages: pages });
};
render() {
...
// 没有了父元素，这些属性需要重复出现在每个<PDF>元素上，所以拉出来定义
const ps = {
file: pdfUrl,
cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/',
cMapPacked: true,
workerSrc: '/pdf.worker.js',
};
return (
<Fragment>
<PDF
page={1}
onDocumentComplete={this.onDocumentComplete}
{...ps}
/>
{this.state.numPages > 1 && directlyRenderPdf(this.state.numPages, ps)}
</Fragment>
);
};
这个 directlyRenderPdf 稍微有点差异，要把那些属性传进去：
export const directlyRenderPdf = (pages, moreProps) => {
const x = [];
for (let i = 2; i <= pages; i++)
x.push(<PDF page={i} key={`x${i}`} {...moreProps} />);
return x;
};
- 第二个问题就是字符不能显示了。设置 cMapUrl、cMapPacked 两个属性如上面代码，即可解决。
- 第三个问题是加在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);
}
- 本来搞到这里就结束了，不管react-pdf还是react-pdf-js，解决问题就行。然而编译发布的版本，并且是拆解js文件的那种，用后者会报一个Invalid Assignment错误，以我目前道行不能解决。所以最后采用了react-pdf，并且移除了react-pdf-js依赖。不过没有后者弄一下，可能下载不到pdf.worker.js。
如有错漏，恳请同道指正。
