En el momento en el que un cliente realice un agendamiento, este debe recibir un correo con un PDF adjuntado donde figuren los datos tanto del cliente como de la propiedad agendada.
Necesito que el cliente, al momento de clickear el botón, se me genere y guarde ese PDF en una carpeta y a su vez poder adjuntarlo y enviarlo.
He intentado react-pdf y no se me da.
Al inicio coloco unas variables manuales, pero estas deberían ser llamadas desde Strapi, pero lo que me preocupa en este momento, es generar dicho PDF.
import React, { Component } from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
import {Row, Col, Label} from 'reactstrap';
// import 'react-pdf/dist/Page/AnnotationLayer.css';
class PDF extends Component {
state = {
numPages: null,
pageNumber: 1,
name: "Nombre y Apellido",
rut: 262330770,
to: "mail@example.com",
image: "Imagen",
type: "Casa/Departamento",
address: "Dirección",
uf: 10000,
meters: 100,
terraza: 150,
rooms: 3,
baths: 2
}
onDocumentLoadSuccess = ({ numPages }) => {
this.setState({ numPages });
}
render() {
const { pageNumber, numPages, file, name, rut, to, image, type, address, uf, meters, terraza, rooms, baths } = this.state;
return (
<div className="main">
<section className="default-section">
<div className="container">
<div className="row">
<div className="col-lg-8 col-md-12 text-center">
<Document file="somefile.pdf" onLoadSuccess={this.onDocumentLoadSuccess}>
<Page pageNumber={pageNumber} />
</Document>
<p>Page {pageNumber} of {numPages}</p>
</div>
<div className="col-lg-8 offset-lg-2 col-md-12 text-center">
<br/>
<img src={require('../../assets/images/mail/logo-booking.png')}/>
<br/>
<br/>
</div>
<div className="col-lg-8 offset-lg-2 col-md-12 text-center">
<h6>{name} | RUT: {rut} | Correo: {to}</h6>
</div>
<div className="container">
<hr/>
<Row>
<Col lg="8" offset-lg="2">
<h4>Orden de visita por la siguiente propiedad</h4>
<br/>
</Col>
<Col xl="6" lg="6" md="6">
<h4>{image}</h4>
</Col>
<Col xl="6" lg="6" md="6">
<div className="bordered-box">
<h4>UF: {uf}</h4>
<label>Tipo de propiedad</label>
<p style={{textTransform: "capitalize"}}>{type}</p>
<label>Dirección referencial</label>
<p style={{textTransform: "capitalize"}}>{address}</p>
<label>Metros Construidos</label>
<p>{meters} m<sup>2</sup></p>
<label>Terraza</label>
<p>{terraza} m<sup>2</sup></p>
<Label>Dormitorios</Label>
<p>{rooms}</p>
<Label>Baños</Label>
<p>{baths}</p>
</div>
</Col>
</Row>
<hr/>
</div>
</div>
</div>
</section>
</div>
);
}
}
export default PDF;