Hago una consulta a una api donde traigo 1 json. Los datos de ese json los paso a la tabla en jsx mediante Hooks.
Cuando presiono el botón con la función exportPDF. El problema es que eso me funciona perfecto si es un 1 json el que traigo, necesito que si hago 1 consulta y me trae 2 objetos me renderize 1 tabla de cada registro en 1 pdf pero en 1 pagina cada 1
En el código puse algunos comentarios explicando lo que se hace en cada línea, por ejemplo hay 2 tipos de consulta: una que trae 1 json que es la que me funciona ahorita ?filter=idMerchant y la otra que esta comentada que trae 2 json idMerchant$in28::4193 que es la que necesito utilizar.
No puedo pasar la url ni los tokens por temas de seguridad :/ obviamente.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Table, Button } from 'reactstrap';
import { savePDF, PDFExport } from '@progress/kendo-react-pdf';
const styles = {
title: {
textAlign: 'center',
fontSize: '30px',
fontWeight: 'bold',
},
subtitle: {
textAlign: 'center',
background: '#67B71F',
color: 'white',
},
td: {
fontSize: '15px',
},
th: {
fontSize: '15px',
fontWeight: 'bold',
},
button: {
fontWeight: 'bold',
},
};
const options = {
headers: {
Authorization: process.env.REACT_APP_GETTOKENPDF,
},
};
const BlankPage = () => {
const pdfExportComponent = React.useRef(null);
const [legalName, setLegalName] = useState('');
const [merchantName, setMechantName] = useState('');
const [Id, setId] = useState('');
const [officerUpdate, setofficerUpdate] = useState('');
const [activationDate, setActivationDate] = useState('');
const [merchantType, setMerchantType] = useState('');
const [email, setEmail] = useState('');
const [address, setAddress] = useState('');
const [phone, setPhone] = useState('');
const [ruc, setRuc] = useState('');
const [legalRp, setLegalRp] = useState('');
const [legalTypeId, setLegalTypeId] = useState('');
const [legalIdNum, setLegalIdNum] = useState('');
const [legalRepCountry, setLegalRepCountry] = useState('');
const [NoMCC, setNoMCC] = useState(0);
const [domain, setDomain] = useState('');
const [socialRed, setSocialRed] = useState('');
const [activity, setActivity] = useState('');
const [arrayprueba, setarrayprueba] = useState([]);
useEffect(() => {
const apiURL = `${process.env.REACT_APP_URL_PDF}?conditional=idMerchant$in28::4193`;
// const apiURL = `${process.env.REACT_APP_URL_PDF}?conditional=idMerchant$in28::4193`;
axios
.get(`${apiURL}`, options)
.then(({ data }) => {
data.data.map((response) => {
setarrayprueba(response);
setActivity(response.about);
setLegalName(response.legalName);
setMechantName(response.merchantName);
setId(response.idMerchant);
setofficerUpdate(response.officerUpdate);
setActivationDate(response.activationDate);
setMerchantType(response.merchantType);
setEmail(response.email);
setAddress(response.address);
setPhone(response.phone);
setRuc(response.ruc);
setLegalRp(response.legalRep);
setLegalTypeId(response.legalRepIdType);
setLegalIdNum(response.legalrepIdNum);
setLegalRepCountry(response.legalRepCountry);
setNoMCC(response.mcc);
setDomain(response.additionalAttributes.webPage);
setSocialRed(response.additionalAttributes.redSocial);
});
})
.catch((error) => {
// eslint-disable-next-line no-alert
console.log('Alerta error: ', error.data);
});
}, []);
return (
<>
<PDFExport forcePageBreak=".page-break" ref={pdfExportComponent}>
{}
<div
style={{
width: '700px',
height: '10%',
}}
>
<div id="content" className="card text-left ">
<caption style={styles.title}>INFORMACION DE REGISTRO</caption>
<Table className="table table-bordered">
<tbody>
<tr>
<td style={styles.th} colSpan="1">
Nombre de la Cuenta:
</td>
<td style={styles.td}>{merchantName}</td>
<td style={styles.th}>ID:</td>
<td>{Id}</td>
</tr>
<tr>
<td style={styles.th}>Usuario que registro la cuenta:</td>
<td style={styles.td}>{officerUpdate}</td>
<td style={styles.th}>Fecha:</td>
<td style={styles.td}>{activationDate}</td>
</tr>
<tr>
<td style={styles.th}>Tipo de cuenta:</td>
<td style={styles.td}>{merchantType}</td>
</tr>
<tr>
<td style={styles.td} colSpan="4">
Los terminos y condiciones son aceptados por defecto al
momento del registro de la cuenta.
<a href="https://www.paguelofacil.com/terminos-y-condiciones">
https://www.paguelofacil.com/terminos-y-condiciones
</a>
</td>
</tr>
</tbody>
</Table>
</div>
{/* <h3 className="page-break" hidden></h3> */}
{/* Salto de pagina */}
</div>
</PDFExport>
<br />
<Button color="info" size="lg" style={styles.button} onClick={exportPDF}>
Descargar
</Button>
<Button
className="k-button"
onClick={() => {
if (pdfExportComponent.current) {
pdfExportComponent.current.save();
// Export to pdf
}
}}
>
Export PDF
</Button>
<br />
</>
);
};
export default BlankPage;
Borré la tabla en el componente porque era muy grande.
html
en un PDF para su descarga posterior, es correcto ?${process.env.REACT_APP_URL_PDF}?conditional=idMerchant$in28::4193
; En esta sintaxis traigo 2 registros tanto el 28 con el 4193 por ejm ahi solo puse pero puedo poner los que yo quiera, $in28::4193::1565::244 ... y asi, entonces despues cuando presiono el boton necesito una forma de descargar los 2 registros en 1 pdf cada uno