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

【问题标题】：How do I get the page count from a PDF file with react-pdf?如何使用 react-pdf 从 PDF 文件中获取页数？
【发布时间】：2021-10-19 12:34:18
【问题描述】：

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

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

但是numPages 状态对我来说完全是个谜。我通过第 17 行的 onDocumentLoadSuccess 函数设置它，如他们的 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;

【问题讨论】：

标签： reactjs pdf react-pdf

【解决方案1】：

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

所以试着像这样访问函数，看看你是否得到了所有的 PDF 对象，如下所示。

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

【讨论】：

numPages 仍然未定义该解决方案 Parag Raje