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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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