form completo

parent 213f7a50
......@@ -162,4 +162,15 @@ p {
.negrita {
font-weight: bold;
}
.textForm-container {
width: 90%;
}
.button-container {
width: 100%;
display: flex;
justify-content: space-around;
border-top: 1px solid #ced4da;
}
\ No newline at end of file
import './App.css';
import { jsPDF } from "jspdf";
import React from 'react';
import React, { useState } from 'react';
import './App.css';
import Telefono from './assets/images/telefono.png';
import Mail from './assets/images/email.png';
......@@ -8,13 +8,14 @@ import Map from './assets/images/map.png';
// import $ from "jquery";
function App () {
const [ renderAlert, setRenderAlert ] = useState(false);
const previsualizacionPdf = () => {
// Objeto jsPDF para utilizar los metodos de la libreria inicializado con los sig. args
// p : Hoja vertical
// pt: medicion en puntos de la hoja
// letter: Tipo de papel a utilizar carta
var pdf = new jsPDF('p', 'pt', 'letter');
var pdf = new jsPDF('p', 'pt', 'a4'); //'l', 'mm', [1200, 1210] 'p', 'pt', 'a4'
// --------- Configuracion del PDF -----------
var margin = 10; // Margin que se le dara en todos los lados del pdf
......@@ -40,7 +41,7 @@ function App () {
const generarPdf = () => {
// Utilizamos la misma configuracion PDF que en la funcion "PrevisualizacionPdf"
var pdf = new jsPDF('p', 'pt', 'letter');
var pdf = new jsPDF('p', 'pt', 'a4');
var margin = 5;
var scale = (pdf.internal.pageSize.width - margin * 2) / document.body.scrollWidth;
......@@ -56,6 +57,10 @@ function App () {
}
});
}
const mensajeEnviado = () => {
setRenderAlert(true);
}
return(
<div className='father-container'>
......@@ -271,18 +276,36 @@ function App () {
</div>
{/* Secciones Principales */}
</div>
<button onClick={ previsualizacionPdf }>
Previsualizacion del Pdf
</button>
<div className="button-container mt-4">
<button type="button" className="btn btn-outline-primary mt-3" onClick={ previsualizacionPdf }>
Previsualizacion del Pdf
</button>
<button onClick={ generarPdf }>
Generar Pdf
</button>
<button type="button" className="btn btn-outline-primary mt-3" onClick={ generarPdf }>
Generar Pdf
</button>
</div>
<div className="d-flex justify-content-center align-items-center mt-4">
<div className="textForm-container mb-3">
<label for="form-contact" className="form-label negrita">Formulario de Contacto</label>
<textarea className="form-control" id="form-contact" rows="3"></textarea>
<div id="liveAlertPlaceholder"></div>
<div className='d-flex justify-content-end'>
<button type="button" class="btn btn-success mt-2" id="liveAlertBtn" onClick={mensajeEnviado}>Enviar</button>
</div>
{renderAlert &&
<div class="alert alert-success mt-3" role="alert">
Mensaje Enviado
</div>
}
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment