如何使用react-pdf从PDF文件中获取页数？

Question

到目前为止，使用react-pdf很简单，但我遗漏了一个我不知道如何找到的关键部分。我正在尝试获取加载时 PDF 文档的总页数。我需要它来创建页码导航。显然，数据存在于某处，因为将<Page>标签的pageNumber属性更改为硬编码值将显示正确的页面。但我不知道如何访问它。

我的代码如下。据我所知，我完全按照他们的指示去做。我关注的示例在这里： https: //www.npmjs.com/package/react-pdf

但这个numPages国家对我来说完全是个谜。我通过onDocumentLoadSuccess第 17 行的函数进行设置，如他们的 Github 文档示例中所示。{ numPages }但我不知道它应该从哪里得到争论。因为，按原样来说，numPages仍然是未定义的。因此，pageSelection（第 10 行）永远不会被填充。

也许我错过了一些东西，但据我所知，他们的文档没有解释这一点： https: //react-pdf.org/

有人可以帮我吗？

import React, { useState } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';

const PDFDisplay = (props) => {
    pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

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

    let pageSelection;

    if (numPages) {
        pageSelection = Array(1 - numPages + 1).fill().map((_, idx) => 1 + idx);
        console.log(numPages.length);
    }
    
    const onDocumentLoadSuccess = ({ numPages }) => {
        setNumPages(numPages); 
    }

    const showPageSelection = () => {
        console.log(`numPages: ${numPages}`);
        return (
            <ul style={{ listStyle: 'none', display: 'inline-block' }}>
                { 
                    pageSelection.map(function(cur, idx) {
                        if (idx + 1 === pageNumber){
                            return <li><b>{idx + 1}</b></li>
                        } else {
                            return <li onClick={setPageNumber(idx)}>{idx + 1}</li>
                        }
                    })
                }
            </ul>
        );
    }

    return (
        <div>
            <Document
                file={props.file}
                onLoadSuccess={onDocumentLoadSuccess}
            >
                <Page pageNumber={pageNumber} />
            </Document>
            { numPages > 1 ? showPageSelection : null }
        </div>
    )
}

export default PDFDisplay;

Answer 1

在 中onDocumentLoadSuccess()，您将得到一个完整的文档信息对象；numPages是该对象的属性之一。

因此，尝试访问这样的函数，看看是否获取了所有 PDF 对象，如下所示。

function onDocumentLoadSuccess(pdf)  {
    console.log('Document',pdf);
    setNumPages(pdf?.numPages);
}