react使用react-pdf弹窗预览pdf

最近在做react项目，遇到一个需求，就是上传pdf后，点击可以弹窗预览pdf。如果用window.open（）的话，就是直接利用游览器自带的pdf预览功能打开。各家游览器效果不一样，我这里是要做一个点击之后弹窗展示，在查阅各个资料后，最后选择了react-pdf这款插件。下面分享一下踩坑经历。

步骤一：通过执行npm install react-pdf或者yarn add react-pdf来安装

步骤二：通过import { Document, Page, pdfjs } from 'react-pdf';引入

步骤三：全部参考代码

1.  
   import React, { useState } from "react";
2.  
   import { Form, Checkbox, Modal } from "antd";
3.  
   import { Document, Page, pdfjs } from "react-pdf";
4.  
   pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
5.  
    
6.  
   const Index = (props) => {
7.  
   const { title, isModalVisible, handleClose , file } = props;
8.  
   //pdf预览功能
9.  
   const [numPages, setNumPages] = useState(null);
10.  
     
11.  
    function onDocumentLoadSuccess({ numPages }) {
12.  
    setNumPages(numPages);
13.  
    }
14.  
    return (
15.  
    <div>
16.  
    <Modal
17.  
    v2
18.  
    title={title}
19.  
    visible={isModalVisible}
20.  
    footer={false}
21.  
    onClose={handleClose}
22.  
    width={1000}
23.  
    height={800}
24.  
    >
25.  
    <div>
26.  
    <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
27.  
    {Array.from(new Array(numPages), (el, index) => (
28.  
    <Page
29.  
    key={`page_${index 1}`}
30.  
    pageNumber={index 1}
31.  
    renderAnnotationLayer={false}
32.  
    renderTextLayer={false}
33.  
    width={930}
34.  
    />
35.  
    ))}
36.  
    </Document>
37.  
    </div>
38.  
    </Modal>
39.  
    </div>
40.  
    );
41.  
    };
42.  
     
43.  
    export default Index;

踩坑指南：

1.如果遇到报错SyntaxError: expected expression, got '<'

解决方式：在引入react-pdf的下一行加上以下代码即可解决。

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

2.打开pdf乱码，样式混乱，在<Page />组件加入renderAnnotationLayer和renderTextLayer={false}两个参数为fale

1.  
   <Page
2.  
   key={`page_${index 1}`}
3.  
   pageNumber={index 1}
4.  
   renderAnnotationLayer={false}
5.  
   renderTextLayer={false}
6.  
   width={930}
7.  
   />

3.file参数就是填写你pdf的在线地址，如果你要在本地预览，则需要把pdf放在public下通过/xx的方式，如 file={'/xxx.pdf'}

4.后端如果返回的是文件流需要把返回的res转换一下格式

1.  
   new Promise((resolve, reject) => {
2.  
   let blob = new Blob([res], { type: 'application/pdf;charset=utf-8' });
3.  
   const reader = new FileReader();
4.  
   reader.readAsDataURL(blob);
5.  
   reader.addEventListener('load', function () {
6.  
   let base64: any = reader.result;
7.  
   setTermsSite(base64); //保存转换后的数据
8.  
   });
9.  
   });

这篇好文章是转载于：学新通技术网