跳转到指定页面并显示全部内容的React PDF实现

Question

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

我会感激一个能够解决这两个问题的工作解决方案或包。

提前感谢您的帮助。

- M Huster

---

@M Huster，你找到任何解决方案了吗？ - Souvik Ray

Answer 1

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

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

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

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

在所有带有页码的Page标签的页面上添加引用：

{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>
))}

- Vijit Nagar