ReactJS React-pdf 错误“无法加载 PDF 文件。”经过一些尝试

我创建了一个 React js 应用程序create-react-app我正在尝试react-pdf查看 pdf。我遇到的问题是我的代码有时有效，有时无效。当我第一次加载应用程序时，pdf 总是加载得很好，但如果我访问网站上的其他链接/url，然后导航到包含 pdf 的页面，则 pdf 可能会在几次尝试后加载失败，并出现错误“加载失败” PDF 文件”。

if error it looks like below image

if success it look like below image

这就是我的实现方式

imports

import { Document, Page, pdfjs } from 'react-pdf/dist/esm/entry.webpack';
import { useState } from 'react';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

代码实现

function ReactPDF() {
    const imageKitURL = ' https://ik.imagekit.io/kwmvfjr0r';
    const pdf = `${imageKitURL}/test_files/file-example_PDF_1MB.pdf`;

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

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

    function changePage(offset) {
        setPageNumber((prevPageNumber) => prevPageNumber + offset);
    }

    function previousPage() {
        changePage(-1);
    }

    function nextPage() {
        changePage(1);
    }

    return (
        <>
            <div>
                <p>
                    Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}
                </p>
                <button type="button" disabled={pageNumber <= 1} onClick={previousPage}>
                    Previous
                </button>
                <button type="button" disabled={pageNumber >= numPages} onClick={nextPage}>
                    Next
                </button>
            </div>
            {/* eslint-disable-next-line react/jsx-no-bind */}
            <Document file={pdf} onLoadSuccess={onDocumentLoadSuccess}>
                <Page pageNumber={pageNumber} />
            </Document>
        </>
    );
}

我希望问题足够详细以解释情况

尝试使用以下命令安装类型：

npm i -D @types/react-pdf