React 项目预览PDF

1.安装 pdfjs-dist

npm i pdfjs-dist --save

2.项目中引用

import PDFJS from 'pdfjs-dist'
import workerSrc from 'pdfjs-dist/build/pdf.worker.entry';

import React, { useEffect, useState } from 'react';
import { Modal, Slider, InputNumber, Row, Col } from 'antd';
import PDFJS from 'pdfjs-dist'
import workerSrc from 'pdfjs-dist/build/pdf.worker.entry';
import styles from './style.less';

PDFJS.workerSrc = workerSrc;

const PdfModal = ({ visible, onCancel, initData }) => {

    const [pages, setPages] = useState([]);
    const [zoomValue, setZoomValue] = useState(60)

    useEffect(() => {
        if (initData) {
            PDFJS.getDocument(initData.url).promise.
                then(async (pdf) => {
                    for (let i = 1; i <= pdf.numPages; i++) {
                        setPages((newData) => {
                            return newData.concat(i)
                        })
                        pdf.getPage(i).then((page) => {
                            const canvas = document.getElementById(`PdfCanvas${i}`)
                            const viewport = page.getViewport({ scale: 1 });
                            const ctx = canvas.getContext('2d')
                            canvas.height = viewport.height
                            canvas.width = viewport.width
                            const renderContext = {
                                canvasContext: ctx,
                                viewport
                            }
                            page.render(renderContext)
                        })
                    }
                },
                    (reason) => {
                        console.error(reason)
                    }
                );
        }
    }, [initData])

    const onZoomChange = value => {
        setZoomValue(value)
    }

    return (
        <>
            <Modal title={initData ? initData.title : 'Pdf查看'}
                visible={visible}
                centered
                forceRender
                bodyStyle={{ padding: 0, backgroundColor: '#c3c3c3' }}
                footer={<div className={styles.modalFooter}>
                    <Row>
                        <Col span={16}>
                            <Slider
                                min={1}
                                max={120}
                                onChange={onZoomChange}
                                value={typeof zoomValue === 'number' ? zoomValue : 60}
                            />
                        </Col>
                        <Col span={8}>
                            <InputNumber
                                min={1}
                                max={120}
                                bordered={false}
                                formatter={value => `${value}%`}
                                parser={value => value.replace('%', '')}
                                style={{ margin: '0 16px' }}
                                value={zoomValue}
                                onChange={onZoomChange}
                            />
                        </Col>
                    </Row>
                </div>}
                width='80%'
                onCancel={onCancel}>
                <div className={styles.pdfViewer}>
                    {pages.map(
                        (res, index) =>
                            <canvas key={res} id={`PdfCanvas${index + 1}`} style={{ width: `${zoomValue}%` }} className={styles.myCanvas} />
                    )
                    }
                </div>
            </Modal>
        </>
    );
};

export default PdfModal

3.效果