Mostrar PDF en reactJS

Solución:

parece que está pasando los datos PDF directamente al <ReactPDF> componente como el valor de la file apuntalar. Pero de acuerdo con los documentos, debe usar un objeto que contenga un data propiedad:

<ReactPDF
  file={{
    data: renderPdf
  }}
/>

parece que también puedes configurar file a un objeto que contiene un url propiedad, para permitir que ReactPDF obtenga el pdf de su backend por sí mismo, si eso es más fácil:

<ReactPDF
  file={{
    url: 'http://www.example.com/sample.pdf'
  }}
/>

Si su objetivo es solo ver el pdf en su aplicación, la forma más fácil es usar la etiqueta de objeto en HTML. No necesita importar ninguna biblioteca y funciona con la mayoría de los navegadores. Pero esto es falta de personalización y estilos.

  <object data="http://africau.edu/images/default/sample.pdf" type="application/pdf" width="100%" height="100%">
      <p>Alternative text - include a link <a href="http://africau.edu/images/default/sample.pdf">to the PDF!</a></p>
  </object>

Resolví el problema. Convierto los datos binarios que recibí del backend en ArrayBuffer.

axios.post(//fire your API).then(response =>
        (response.status === 200? response.data : null))
    .then(pdfdata => {
        var len = pdfdata.length;
        var bytes = new Uint8Array( len );
        for (var i = 0; i < len; i++){
            bytes[i] = pdfdata.charCodeAt(i);
        }

        const renderPdf = bytes.buffer

Luego, de hecho, asigno bytes.buffer a renderPDF para realizar el renderizado. ¡Ahora está funcionando perfectamente!

Al renderizar html de react,

import PDF from 'react-pdf-scroll'
<PDF file={renderPdf} scale={1.3} pages={Infinity} />

---

---

Utiliza Nuestro Buscador