javascript - 在显示所有内容时跳转到带有反应pdf的特定页面

Question

我想在我的 React 项目中实现一个简单的 pdf 查看器。要转到下一页，我希望用户只需滚动即可。我正在使用包 react pdf ( https://www.npmjs.com/package/react-pdf )，它可以很好地显示所有可滚动的页面(如本项目所示:https://codesandbox.io/s/displaying-pdf-using-react-5d003 )，但问题是我想跳转到页面上的特定页面加载。

我将不胜感激能够同时完成这两件事的工作解决方案或软件包。

提前致谢

Answer 1

我们可以在显示所有页面的同时使用refs跳转到特定页面。

const pageRefs = useRef({});
const onItemClick = ({ pageNumber }) =>
    pageRefs.current[pageNumber].scrollIntoView({ behavior: 'smooth' });

在 Document 标签中像这样调用 onItemClick:

<Document
    file={pdfUrl}
    onLoadSuccess={onDocumentLoadSuccess}
    loading=""
    onItemClick={onItemClick}
>

在 Page 标签中为所有带有页码的页面添加 refs:

{Array(...Array(pages))
    .map((x, i) => i + 1)
    .map(page => (
       <div key={page} ref={el => { pageRefs.current[page] = el; }}>
          <Page
              pageNumber={page}
              width={width}
              loading=""
          />
          </div>
))}