javascript - close - Imprimir contenido modal como página A4 completa

modal javascript

Question

Estoy probando dos cosas:

1. Muestra el contenido en un modo tal como aparecería en una página A4.
2. windows.print () el modal en una página A4 a través de los principales navegadores

Lo siguiente es mi CSS:

.page {
    width: 210mm;
    min-height: 297mm;
    padding: 20mm;
    margin: 10mm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
    padding: 1cm;
    border: 5px black solid;
    height: 257mm;
    outline: 2cm #FFEAEA solid;
}

@page {
    size: A4;
    margin: 0;
}

@media print {
    html, body {
        margin:0 !important;
        padding:0 !important;
        height:100% !important;
        visibility: hidden;
    }

    .page .subpage .col-md-12,.col-lg-12{
        float:left;
        width:100%;
    }
    .page .subpage {
        padding: 1cm;
        border: 5px black solid;
        height: 257mm;
        outline: 2cm #FFEAEA solid;
        position:absolute;
    }
    .page {
        visibility: visible;
    }
}

Así es como se ve el modal:

Pero así es como se ve en window.print() al hacer clic en el botón:

¿Qué estoy haciendo mal aquí? Relativo CSS novato, he mirado un montón de preguntas de SO y otros recursos, pero parece que no puede resolver esto.

ACTUALIZACIÓN: usé el índice z: 9999 y el ancho: 140% para obtener el contenido modal (es decir, clase = "página") para cubrir el ancho de la página A4. No piense que es la mejor solución, tampoco puede obtener altura para estirar los 297 mm completos; La altura sigue siendo la que se muestra en la segunda imagen. El 140% se ve bien en un pdf guardado a través de Chrome, está cortado (de manera comprensible) en Firefox y se muestra como un pdf en blanco en IE. CSS actualizado: @media print .page {z-index: 9999;padding: 20mm;margin: 10mm auto;width: 140%;height:100%;position: fixed;top: 15mm;bottom:0;left: 20mm;visibility:visible;}

Answer 1

Escribiría un comentario pero no puedo, así que responda el recuadro. tl; dr, debe proporcionar más código o reproducir este problema en un lugar donde podamos verlo.

Puse su código en una página simple con solo un div con una page clase y anidé un div con una subpage y hay algunos problemas de relleno y la vista de impresión no se parece en nada a la vista web.

Su min-height: 297mm; no era necesario y estaba agregando espacio adicional, ya que no se alinea con su configuración de altura para .subpage .

Su position:absolute; .subpage su .subpage en la vista de impresión.

Pero con esos dos ajustes, su css, con solo divs simples en html, funciona bien. Sospecho que algo más en su página tiene dimensiones conflictivas, pero nuevamente, sin una reproducción en el violín o algo así, no podemos verlo.

PD: Vi esta otra publicación de hace un tiempo y hay una DEMO allí. Parece prometedor: CSS para establecer el tamaño de papel A4

Answer 2

He actualizado un ejemplo de jsfiddle para satisfacer sus necesidades

Aquí está el código css

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: yellow;
  }
}

Aquí está el html:

<div>
  <button id="btnPrint">Print (this button should also be NOT be printed)!</button>
</div>

<hr />
<div id="printSection">
  <div id="printThis">
    This should BE printed!
  </div>

  <div id="printThisToo">
    This should BE printed, too!
  </div>

</div>

y un código javascript para llamar a imprimir:

document.getElementById("btnPrint").onclick = function() {
  window.print();
}

http://jsfiddle.net/95ezN/1459/

Answer 3

Por favor prueba esto

@media print{
  body * {
    visibility: hidden;
  }
  #page, #page * {
    visibility: visible;
  }
  #page {
    position: absolute;
    top: 0;
    left: 0;
  }
}