【问题标题】：react-pdf won't render basic pdfreact-pdf 不会呈现基本的 pdf
【发布时间】：2021-10-19 13:30:03
【问题描述】：

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

ReferenceError: $RefreshReg$ is not defined

概念证明组件。是的，这个 sn-p 中没有使用这些选项，但我已经尝试过使用它。我尝试将 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",

【问题讨论】：

标签： react-pdf

【解决方案1】：

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

将const options 更改为：

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

这里：

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

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

【讨论】：

【解决方案2】：

这里可能有两个问题..

确保您的本地 pdf 文件位于公用文件夹中。
像这样使用pdfjs.version，而不是传入options。

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

文档：react-pdf

【讨论】：