React-pdf：pdf预览插件实践

需求：需要将后端返回的文件地址读出来，然后在页面上预览

1.分析

开始需求的时候我使用的是iframe标签去实现的，如下代码，因为返回来的是一个文件对象，需要使用Blob实例化，上面是官网的blob资料，这里v是一个Blob数据，然后使用createObjectUrl将blob转为服务器上的url地址，然后展示即可

const res: any = await fetch(`${selected_content?.doc_type}`);
          res.blob().then((v: any) => {
                let blob = new Blob([v], { type: 'application/pdf' })
                const url = URL.createObjectURL(blob);
           anchorJsx = <div style={{height: '100%'}} className='markdown-body'>
              <iframe src={url} title="pdf" style={{height: '100vh', width:'100%'}} />
             </div>
})

2.Bug

1中的方式，因为页面是需要跨端的，在移动端上pdf无法显示，且无法样式自适应，我们就另找它法，使用频率很高的react-pdf是最合适的（react-pdf - npm）API也很友好，下面我们进入实践。

3.实践

1）首先一定是安装插件

npm install --save react-pdf，如果你是用了s不要忘记安装相应的ts版本，这个vscode都会有提示；

2）安装成功后我们引入，官方有详细的样例：

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';

function MyApp() {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document file="somefile.pdf" onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
}

踩坑：还是很简单的，但是这里面进来就会才一个坑，报错如下：

 npm上继续看文档，会有详细的解释：

大概意思就是你项目下无法访问这个文件，解决方案，我们更换了CDN，如下（pdf对象来自react-pdf）：

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cat.net/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

 3）下来完善我们的代码

如果按照样例那样写，<Page/>组件只循环了一遍，pageNumber也没有变一直是默认的1，但是我们获取到了所有页数numPages，然后如果想一下预览所有的pdf页，我们只要去循环1~numPages就好，for循环比较笨，我们这样写：

<Document file={selected_content?.doc_type} onLoadSuccess={onDocumentLoadSuccess}>
                        {
                            new Array(numPages).fill('').map((_item, index) => {
                                return <Page scale={2} key={index} pageNumber={index + 1} />
                            })
                        }
                    </Document>

new Array创建了一个有numPages项元素的数组，然后我们给每一个元素赋值使用fill方法，这样这个数组就有个55项，那么我们只要使用下标就好了

注：组件还有许多属性，例如我用到的scale就是放大的倍数，可以试页面不失真，如果单纯放大宽度会模糊，因为本身他原是大小就是720*405，比较小。

4）现在我们就完成了，效果如下，也会根据

宽度自适应 ，移动端也可以适配。

最后，我们可以在完善下，比如每次加载五页，点击加载更多，会在出现5页，这个前端截取数据就可以实现，这个就不具体实现了，that's all