react-pdf 不会呈现基本的 pdf

问题描述

尝试使用 react-pdf 渲染 pdf，我发誓我已经完成了他们文档的所有配置，但没有任何效果。我不断得到

ReferenceError: $RefreshReg$ is not defined

概念验证组件。是的，此代码段中未使用这些选项，但我已尝试使用它。我尝试将 cmaps 直接引入这个组件并在那里引用它。我尝试了复制 webpack 插件并完全按照文档的建议进行操作。没有任何效果。总是同样的错误。希望我只是错过了一些小细节。

/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-empty-function */
/* eslint-disable @typescript-eslint/ban-ts-comment */
import { Container,Paper } from '@material-ui/core';
import React,{ useState } from 'react';
import { Document,Page } from 'react-pdf/dist/esm/entry.webpack';
import { pdfjs } from 'react-pdf';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.js';

const options = {
    cMapUrl: `//cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/cmaps/`,cMapPacked: false
};


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

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

    return (
        <Container>
            <Paper>TVR Preview</Paper>

            <Paper elevation={6}>
                <Document file="./PDFTestTVR.pdf" onLoadSuccess={onDocumentLoadSuccess}>
                    <Page pageNumber={pageNumber}></Page>
                </Document>
            </Paper>
        </Container>
    );
}

项目详情

使用 react-app-rewired 创建 React App

"start": "react-app-rewired start",

解决方法

为了确保一切正常，请执行以下步骤：

将 const options 更改为：

const options = {
    cMapUrl: 'cmaps/',cMapPacked: true,};

这里：

<Document file="./PDFTestTVR.pdf" onLoadSuccess={onDocumentLoadSuccess}>

将此文件引用更改为位于 Internet 上某处的任何 pdf。