Как отобразить pdf файл находящийся на сервере с помощью react-pdf?

Question

[Марат Иванов]

Есть код компонента, в него приходит файл в формате file: ArrayBuffer(6523)

import React, { useState, useEffect } from 'react';
import { Document, Page } from 'react-pdf';

export const PdfRender = ({file}) => {
	const [docFile, setDocFile] = useState()
	
	const onDocumentLoadSuccess = ({ numPages }) => {
		setNumPages(numPages);
	};

	const goToPrevPage = () =>{
        if(pageNumber > 1){
            setPageNumber(pageNumber - 1);
        }
    }
    const goToNextPage = () =>
        setPageNumber(pageNumber + 1);


		const [ pageNumber, setPageNumber ] = useState(null)
		const [ numPages, setNumPages ] = useState(1)

		return (
			<div>
				<nav>
					<button onClick={goToPrevPage}>{'<'}</button>
					<button onClick={goToNextPage}>{'>'}</button>
				</nav>

				<div style={{ width: 600 }}>
					<Document
						file={file}
						onLoadSuccess={onDocumentLoadSuccess}
					>
						<Page pageNumber={pageNumber} width={600} />
					</Document>
				</div>

				<p>
					Страница {pageNumber} из {numPages}
				</p>
			</div>
		);
	
}

файл получается следующим методом:

const getDoc = async (token) => {
    if(token){
      const config = {
        headers: {
          'Authorization': `Bearer ${token}`
        },
        responseType: 'arraybuffer'
      };
      await makeRequest(() =>
      axios.get(`/api/s/document`, config
      )
      ).then(response => setDocForSing(response))
    }
    sertFind()
  }

При этом возникает ошибка Failed to load PDF file.

Подскажите пожалуйста, как решить данную проблему

Answer 1

[Марат Иванов]

Исходя из кода, надо поставить версию react-pdf пониже, например "react-pdf": "4.1.0". И все будет норм.