react-pdf Отображение файла PDF в браузере

react-pdf

Для отображения pdf файлов можно использовать пакет react-pdf).

Читайте также о проблемах при настройке и их решениях.

Примеры работы с react-pdf

Вывод сразу всех страниц документа

Можно так:

const onLoadError = (error) => {
        console.log('onLoadError', error);
}
const [numPages, setNumPages] = React.useState(null);
const onDocumentLoadSuccess = React.useCallback(
({ numPages }) => { setNumPages(numPages) },
[setNumPages]
);

downloadFile(filePathOrContent);

return (
<Document
    file={filePathOrContent}
    onLoadSuccess={onDocumentLoadSuccess}
    onLoadError={onLoadError}
>
    {Array.apply(null, Array(numPages))
        .map((x, i) => i + 1)
        .map((page, index) => {

            return (
                <div key={index} >
                    <div style={{ 'height': '10px' }} />
                    <Page pageNumber={page} />
                </div>
            );
        })}
</Document>
);