Creé una aplicación react js con create-react-app
y estoy probando react-pdf
para ver archivos pdf. el problema que tengo es que mi código a veces funciona ya veces no. cuando cargo la aplicación por primera vez, el pdf siempre se carga bien, pero si visito otros enlaces/URL en el sitio y luego navego a la página con el pdf, es probable que el pdf no se cargue en algunos intentos con un error "Error al cargar Archivo PDF".
así es como lo he implementado
importaciones
import { Document, Page, pdfjs } from 'react-pdf/dist/esm/entry.webpack'; import { useState } from 'react'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
implementación de código
function ReactPDF() { const imageKitURL = ' https://ik.imagekit.io/kwmvfjr0r'; const pdf = `${imageKitURL}/test_files/file-example_PDF_1MB.pdf`; const [numPages, setNumPages] = useState(null); const [pageNumber, setPageNumber] = useState(1); function onDocumentLoadSuccess({ numPages }) { setNumPages(numPages); setPageNumber(1); } function changePage(offset) { setPageNumber((prevPageNumber) => prevPageNumber + offset); } function previousPage() { changePage(-1); } function nextPage() { changePage(1); } return ( <> <div> <p> Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'} </p> <button type="button" disabled={pageNumber <= 1} onClick={previousPage}> Previous </button> <button type="button" disabled={pageNumber >= numPages} onClick={nextPage}> Next </button> </div> {/* eslint-disable-next-line react/jsx-no-bind */} <Document file={pdf} onLoadSuccess={onDocumentLoadSuccess}> <Page pageNumber={pageNumber} /> </Document> </> ); }
espero que la pregunta sea lo suficientemente detallada para explicar la situación