He estado intentando durante un par de semanas imprimir una etiqueta usando angular. Puedo hacer que la etiqueta se imprima sin problemas. El problema es que pierde el formato de la etiqueta en la vista previa de impresión y también en la impresión. He probado una gran cantidad de código flotando y no importa qué función ejecute el HTML, obtengo los mismos resultados. También probé una combinación de .ts, .html y scss.component. El código está debajo de lo que está funcionando ahora hasta el punto en que necesita imprimirse. También tenga en cuenta que esta es una ventana emergente modal.
printDiv(): void { var divContents = document.getElementById("GFG").innerHTML; var a = window.open('', '', 'height=500, width=500'); a.document.write('<html>'); a.document.write('<body > <h1>Div contents are <br>'); a.document.write(divContents); a.document.write('</body></html>'); a.document.close(); a.print(); } @media print { body * { visibility: hidden; } #section-to-print, #section-to-print * { visibility: visible; } #section-to-print { position: absolute; left: 0; top: 0; } } <div id="GFG" class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableCell"> <br /> <scl-ngx-qrcode [text]="qrCodeString" [options]="options"></scl-ngx-qrcode> <br /> </div> <div class="divTableCell"> <h4 class="text-center">COC: 23456</h4> <div>{{ CompanyName }}</div> <div>{{ AddressLine1 }}</div> <div>{{ AddressLine2 }}</div> <div>{{ City }}, {{ PostalCode }}</div> <div>{{ PhoneNumber }} <div>{{ PrjCode }}</div> </div> <div class="divTableRow"> <div class="divTableCell"> <h1 class="display-2 text-center">RUSH</h1> <br/> Container _____ of _____ <br/> </div> <div class="divTableCell"> </div> </div> </div> </div> <button (click)="printDiv()">Print Label(s)</button>Las clases CSS no están en el alcance del documento de la nueva ventana. Para ello (incluso con innerHTML), la clase divTable no se encuentra por ninguna parte. Parece que no adjunta ninguna hoja de estilo para el nuevo documento. https://stackoverflow.com/a/43110489/15439733 🤨
a.document.write('<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">';Otra opción sería adjuntar estilos a medida que crea el documento, lo que podría ser incluso más simple que adjuntar una hoja de estilos. https://stackoverflow.com/a/53864968/15439733
Aquí hay un ejemplo práctico de cómo adjuntar una hoja de estilo al write en el documento. 👍
https://jsfiddle.net/Nurech/gn76wd1x/2/
Para obtener más información sobre esto: https://timdeschryver.dev/blog/print-css-with-angular#adding-a-print-button