2

Tengo un generador de contratos para una empresa y he creado una función que los imprima al pulsar un botón.

Todo funciona excelente, pero yo quisiera que tenga un pie de página (específicamente una línea verde), pero no sé como hacerlo con JavaScript automáticamente. Si lo hago en el mismo div simulando el tamaño de las hojas manualmente y cambio el tamaño de la hoja, entonces no estará pegado al pie de la página correctamente.

En resumen, quisiera hacer que JavaScript automáticamente meta el código HTML de la línea justo en el pie de la página.

Aquí está el código:

Stack Overflow no ejecuta correctamente el JavaScript, así que tendrás que ejecutarlo externamente.

function imprimirElemento(elemento) {
  var ventana = window.open('', 'PRINT', 'height=1500,width=1500');
  ventana.document.write('<html><head><title>Contrato de Compra Venta</title>');
  ventana.document.write('<link rel="stylesheet" href="../../assets/css/style.css">')
  ventana.document.write('<link href="../../assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">')
  ventana.document.write('<link rel="stylesheet" href="../../assets/css/style.css?v=4_3">')
  ventana.document.write('<link rel="stylesheet" href="../../assets/fontawesome-6_0_0/css/all.min.css">')
  ventana.document.write('<link rel="preconnect" href="https://fonts.googleapis.com">')
  ventana.document.write('<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>');
  ventana.document.write('</head><body class="contrato_body body_otraspg div_imprimir" id="contratogenerar_body">');
  ventana.document.write(elemento.innerHTML);
  ventana.document.write('</body></html>');
  ventana.document.close();
  ventana.focus();
  ventana.onload = function() {
    ventana.print();
    ventana.close();
  };
  return true;
}

document.querySelector(".boton-imprimircont").addEventListener("click", function() {
  var div = document.querySelector("#con_contrato_print");
  imprimirElemento(div);
});
/* ------------------------------------ */


/* ===== Fuentes ===== */

@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oxygen&display=swap");

/* ===== Página Admin Login ===== */

#admin_login_body #page {
  margin: 0;
  margin-top: 0px;
  padding-left: 15em;
  padding-right: 15em;
  width: 100%;
  height: 100vh;
}

.contrato_body #flx_con_contrato {
  width: 100%;
  height: 100%;
  padding: 5px;
  display: flex;
  justify-content: center;
}

.contrato_body #con_contrato_header {
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
}

.contrato_body #con_contrato_header #con_contrato_header_numerocontrato p {
  font-size: 17px;
  margin-bottom: -5px;
}

.contrato_body #con_contrato_header img {
  height: 8.3em;
}

.contrato_body #con_contrato_header #con_contrato_header_numerocontrato {
  margin-top: 11px;
  margin-left: 10px;
  border: 1.5px solid green;
  border-radius: 4px;
  padding: 5px;
  margin-bottom: 50px
}

.contrato_body .horiz_rule {
  margin-top: -11px !important;
  margin-bottom: 9px !important;
  border: black solid 1.5px !important;
  color: black;
  background-color: black;
  opacity: 0.5;
}

.contrato_body #con_contrato {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  justify-content: center;
  width: 65%;
}

#contratogenerar_body #con_contrato {
  border: black solid 1px;
  border-radius: 15px;
  padding: 5%;
  width: 75%;
}

#contratover_body #con_contrato {
  border: black solid 1px;
  border-radius: 15px;
  padding: 5%;
  width: 75%;
}

#con_contrato_body {
  margin-top: 50px;
}

.con_contrato_input {
  /*margin: 4px;*/
  margin-left: 2px;
  margin-right: 2px;
  border-radius: 3px;
  border: 0.1px solid gray;
  color: black;
  width: 55px;
  height: 23px;
}

.contrato_body #con_contrato_datos .con_contrato_datos_body {
  font-size: 17px;
  color: black;
}

.con_contrato_datos_body p {
  margin-bottom: 12px;
  font-size: 16px;
}

#con_contrato_body p {
  margin-bottom: 25px;
  font-size: 17px;
}


/* Firmas */

.contrato_body #con_contrato_body_firmas {
  display: flex;
  justify-content: space-between;
  margin-top: -10px;
}

.contrato_body #con_contrato_body_firmas_top {
  display: flex;
  justify-content: end;
  /*justify-content: space-between;*/
  margin-top: 20px;
}


/*.contrato_body #con_contrato_texto {
  font-family: Gadug
}*/

#admin_login_body #page #msg-devicenotsupportedyet {
  display: none;
}

#admindash_body .page #msg-devicenotsupportedyet {
  display: none;
}


/* ===== Tablas ===== */


/*.in-table {
  /*nada
}*/


/*#admin_login_body #admin_login-form_container {
    padding-left: 3em;
    padding-right: 3em;
}*/


/* ===== Página Nosotros ===== */

.in-nosotros_cards_staff .col .card {
  border: #a8a8a89c solid 0.3px;
}


/* ===== Página Contacto ===== */

#contacto_body #page .clearfix h1 {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 400 !important;
}

#contacto_body #page {
  font-family: 'Open Sans', sans-serif !important;
  padding-top: 25px !important;
}

#contacto_body a {
  text-decoration: none;
}

.in-contacto_mapa {
  border-radius: 5px !important;
}
<!DOCTYPE html>
<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</head>

<body class="contrato_body body_otraspg" id="contratover_body">
  <div class="page" style="font-family: 'Open Sans', sans-serif;">
    <h1 class="text-uppercase text-center mb-4 mt-5"><b><i class="fa-solid fa-eye"></i>&nbsp;Ver Contrato</b></h1>
  <button class="btn btn-primary btn-success boton-imprimircont"><i class='fa-solid fa-print'></i>&nbsp;IMPRIMIR CONTRATO</button>
    <div id="flx_con_contrato">
    
      <div id="con_contrato">
        <div id="con_contrato_print">
          <div id="con_contrato_header">
            <div id="con_contrato_header_numerocontrato" class="text-center">
              <p>N° CONTRATO</p>
              <h2></h2>
            </div>
          </div>
          <h3>CONTRATO DE PRUEBA. SOLO PARA FINES DE CÓDIGO</h3>
          <div id="con_contrato_datos">
            <p><b>Datos de la Propiedad</b></p>
            <hr class="horiz_rule">
            <div class="con_contrato_datos_body">
              <form name="contrato_datos" method="POST" action="generar">
                <p>
                  <b>FRACCIÓN:</b>

                  <b>MANZANA:</b>

                  <b>LOTE:</b>

                  <b>CTA. CORRIENTE CATASTRAL:</b> _____________
                </p>
                <p>
                  <b>SUPERFICIE:</b> 360mts<sup>2</sup> - en letras: Trescientos sesenta mts<sup>2</sup>
                </p>
                <p>
                  <b>MEDIDAS:</b> NORTE__________mts.
                   SUR__________mts.
                   ESTE__________mts.
                   OESTE__________mts.
                </p>
                <p>
                  <b>FINCA:</b> N° ________ Y ________
                  <?php echo $separador; ?>
                  <b>DISTRITO:</b>
                  <?php echo $contrato_distrito; ?>
                </p>
                <p>
                  <b>SECCIÓN:</b> _____________
                  <?php echo $separador; ?>
                  <b>N°:</b> _____________
                  <?php echo $separador; ?>
                  <b>FOLIO:</b> _____________
                  <?php echo $separador; ?>
                  <b>AÑO:</b> _____________
                </p>
                <p>
                  <b>VENDEDOR:</b>
                </p>
              </form>
            </div>
            <p><b>Datos Personales</b></p>
            <hr class="horiz_rule">
            <div class="con_contrato_datos_body">
              <p>
                <b>COMPRADOR:</b>
                Comprador de Prueba
              </p>
            </div>
          </div>
          <div id="con_contrato_body">


            
            <p><b>SEGUNDA:</b> La venta del inmueble deslindado se realiza por el precio total de , que el (la) (los) COMPRADOR (A) (RES) se compromete (n) a abonar al VENDEDOR en la siguiente forma:<br>
              <div style="margin-left: 25px;">
                <b>a)</b> mensuales, que abonará en este acto, sirviendo el presente instrumento como suficiente recibo de lo pagado.<br><br>

                <b>b)</b> El saldo de en cuotas mensuales iguales y consecutivas de, en cuotas cada una.              </div><p><b>SEGUNDA:</b> La venta del inmueble deslindado se realiza por el precio total de , que el (la) (los) COMPRADOR (A) (RES) se compromete (n) a abonar al VENDEDOR en la siguiente forma:<br>
              <div style="margin-left: 25px;">
                <b>a)</b> mensuales, que abonará en este acto, sirviendo el presente instrumento como suficiente recibo de lo pagado.<br><br>

                <b>b)</b> El saldo de en cuotas mensuales iguales y consecutivas de, en cuotas cada una.              </div><p><b>SEGUNDA:</b> La venta del inmueble deslindado se realiza por el precio total de , que el (la) (los) COMPRADOR (A) (RES) se compromete (n) a abonar al VENDEDOR en la siguiente forma:<br>
              <div style="margin-left: 25px;">
                <b>a)</b> mensuales, que abonará en este acto, sirviendo el presente instrumento como suficiente recibo de lo pagado.<br><br>

                <b>b)</b> El saldo de en cuotas mensuales iguales y consecutivas de, en cuotas cada una.              </div><p><b>SEGUNDA:</b> La venta del inmueble deslindado se realiza por el precio total de , que el (la) (los) COMPRADOR (A) (RES) se compromete (n) a abonar al VENDEDOR en la siguiente forma:<br>
              <div style="margin-left: 25px;">
                <b>a)</b> mensuales, que abonará en este acto, sirviendo el presente instrumento como suficiente recibo de lo pagado.<br><br>

                <b>b)</b> El saldo de en cuotas mensuales iguales y consecutivas de, en cuotas cada una.              </div>


          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Gracias!

2
  • Si hay mas paginas como dices, como lo haces para hacer el salto de linea a otra pagina?
    – Srsole
    el 18 ago. 2022 a las 7:38
  • @Srsole dejo que al imprimir lo haga automaticamente. No he configurado nada de eso
    – pabdani
    el 19 ago. 2022 a las 15:46

4 respuestas 4

1
+50

La opción más factible es dejar todo tu contenido dentro de una tabla de html, y a esta tabla agregarle el elemento tfoot que es un elemento que se muestra al final de la tabla. Por ejemplo:

ventana.document.write("<table>");
ventana.document.write(elemento.innerHTML);
ventana.document.write("<tfoot>Contenido del pie de página</tfoot></table>");

Lo interesante de esto es que lo puedes combinar con el atributo table-footer-group de display de css que hará que si el contenido queda en más de una pagina el footer se repita en cada una de ellas.

tfoot {
    display: table-footer-group;
}
1
  • Gracias. Voy a probar y aviso.
    – pabdani
    el 19 ago. 2022 a las 15:47
0

Hay un tag footer en html: https://www.w3schools.com/tags/tag_footer.asp

Pero la verdad, no tengo claro en que ayuda, he utilizado divs para el mismo resultado sin inconvenientes.

Para que tome el espacio de un "footer" puedes ponerle una clase (por ejemplo .footer) y el css:

.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: green;
}
3
  • No, debido a que el documento tiene varias páginas, y en cada una quiero meter la línea de la que estoy hablando en la pregunta. Según sé, no se puede hacerlo con HTML. o CSS.
    – pabdani
    el 17 ago. 2022 a las 21:01
  • Entiendo, sería posible "englobar" esas paginas en un contenedor? y desde donde se muestra el contenedor se agrega el pie de página?
    – Ricardo
    el 17 ago. 2022 a las 21:04
  • Lo que yo estoy haciendo para imprimir el documento es que lo genero todo en un div y luego JavaScript captura este div y lo manda a imprimir. Respecto a tu comentario, eso es lo que estoy haciendo, básicamente. Pero no quiero ponerlo directamente en el contenedor, debido a que si pongo otro tipo de papel, no se adaptaría, ya que la linea verde es fija.
    – pabdani
    el 19 ago. 2022 a las 15:51
0

Quizas complico mas las cosas pero, por que no hacer un PDF ... con jsPDF puedes hacer PDF de HTML, y en otro post pusieron como poner el footer

1
  • Esto parece más bien un comentario, no una respuesta. Cuando tengas suficiente reputación podrás dejar comentarios.
    – padaleiana
    el 19 ago. 2022 a las 14:53
0

Encontré una respuesta muy interesante, y se las dejo aqui como referencia... Explica como llegó a la conclución y código ejemplo:

https://estart.hr/en/news/19/HTML--CSS:-Create-header-and-footer-on-the-top-and-bottom-of-every-printed-page/

1
  • Si bien este enlace puede responder a la pregunta, es mejor incluir las partes esenciales de la respuesta aquí y proporcionar el enlace como referencia. Las respuestas que son únicamente un enlace pueden dejar de ser válidas si la página vinculada cambia. - Desde revisión el 28 sep. 2022 a las 2:42

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.