如何在react.js的pdf中制作页面计数器？

问题描述

我与 react-pdf 一起使用链接显示 pdf。我已经完成了pdf查看器。我现在想做的是制作一个pdf页面计数器。让用户知道他在哪个页面。

我所尝试的是给 window 一个 scroll 事件，它将在特定数量的滚动上增加页面。但它不起作用。我还希望用户在空间中输入页码以导航到该特定页面。

这就是页面计数器的样子。请帮忙。

解决方法

使用 react-pdf 模块

    import React,{ useState } from 'react';
    import { Document,Page } from 'react-pdf';
    
    function App() {
      const [numPages,setNumPages] = useState(0);
      const [pageNumber,setPageNumber] = useState(1);
    
      function onDocumentLoadSuccess({ numPages }) {
        setNumPages(numPages);
      }
    
      return (
        <div>
          <p>{pageNumber} / {numPages}</p>
          <Document
            file="somefile.pdf"
            onLoadSuccess={onDocumentLoadSuccess}>
            <Page pageNumber={pageNumber} />
          </Document>
        </div>
      );
    }
    
    export default App;