Блог

Я хочу реализовать простой просмотрщик pdf в моем проекте react. Чтобы перейти на следующую страницу, я хочу, чтобы пользователь просто прокручивал. Я использую пакет react pdf (https://www.npmjs.com/package/react-pdf ), который просто отлично работает для отображения всех прокручиваемых страниц (как показано в этом проекте: https://codesandbox.io/s/displaying-pdf-using-react-5d003 ), но проблема в том, что я хочу перейти на определенную страницу при загрузке страницы.

Я был бы благодарен за рабочее решение или пакет, который способен выполнять обе эти функции.

Заранее спасибо

Мы можем использовать ссылки для перехода на определенную страницу при отображении всех страниц.

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

Вызовите onItemClick следующим образом в теге Document:

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

Добавьте ссылки на все страницы с номером страницы в теге страницы:

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