ReactJS react-pdf 错误“无法加载 PDF 文件。”在一些尝试

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

如果错误如下图所示 enter image description here

如果成功,如下图 enter image description here

这就是我实现它的方式

进口

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>
        </>
    );
}

我希望这个问题足够详细,可以解释这种情况

stack overflow ReactJS react-pdf error "Failed to load PDF file." on some attempts
原文答案

答案:

作者头像

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

npm i -D @types/react-pdf