0

Buen dia Tengo la libreria react-pdf/renderer y necesito que un arreglo me vaya cargando los datos uno debajo del otro mientras los recorre en el pdf pero no lo he logrado hacer por que react-pdf/renderer no acepta etiquetas como br y no he logrado hacerlo, he revisado la documentación de react-pdf y no encuentro como hacerlo, he revisado sus componentes, estilos pero no he encontrado nada al respecto, he intentado colocar etiquetas o estilos css que me hagan saltos de lineas pero nada.

import React,{useEffect, useState, useContext} from 'react';
import {PDFViewer,Image, Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';


import MaterialTable from 'material-table';
import 'bootstrap/dist/css/bootstrap.min.css';


const styles = StyleSheet.create({
    page: {
      flexDirection: 'row',
      backgroundColor: '#FFFFFF'
    },
    section: {
      margin: 10,
      padding: 10,
      flexGrow: 2,
     top:10,
    // marginVertical: 70,
    },
    image: {
      width: '20%',
          height:"20%",
          padding: 10,
          backgroundColor: 'white',
          top:100,
  },
  
  });
     
  const MyDoc = (props) => (
    
    <Document title="INFORME">
      <Page size="A4" style={styles.page}  >
        <View style={styles.section } >
  
          <Text >{arreglo2} </Text>
  
        </View>
        
      </Page>
    </Document>
    
  );
  
  const arreglo = [1,2,3,4];

   const arreglo2= [...arreglo];

   
function Pdf(props) {

    return (
        <div>
            
             <PDFViewer  style={{width: "100%", height: "100vh"}}>
    <MyDoc />

    
  </PDFViewer>

            
        </div>
        
        
    )
}


export default Pdf

2 respuestas 2

0

ya pude solucionar , solo era editar el TEXT de la siguiente forma :

{
          arreglo2.map(name => (  
            <Text>  
              {name}  
            </Text>  
          ))
        }

0

Tambien podrias utilizar un Template String, el cual tomaria \n como salto de linea, el código quedaría de esta manera:

<Text>
 {arreglo2.map(name => (    
   {`${name}\n`}  
  ))
 }
</Text>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.