Saltar al contenido

Imprimir plantilla Html en Angular 2 (ng-print en Angular 2)

Este team especializado pasados muchos días de investigación y recopilar de información, hallamos los datos necesarios, deseamos que resulte de utilidad para tu trabajo.

Solución:

Así lo he hecho yo en angular2 (es parecido a eso hundido solución) En su archivo HTML:



y en su archivo TS:

print(): void 
    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
      
        
          Print tab
          
        
    $printContents
      `
    );
    popupWin.document.close();


ACTUALIZAR:

También puede atajar la ruta y usar simplemente la biblioteca ngx-print para una codificación menos inconsistente (mezclar JS y TS) y más casos de impresión controlables y seguros listos para usar.

En caso de que alguien más se encuentre con este problema, si ya ha diseñado la página, le recomendaría usar consultas de medios para configurar su página de impresión. Luego puede simplemente adjuntar una función de impresión a su botón html y en su componente llamar a window.print();

componente.html:

Header is here.
all my beautiful print-related material is here.
my footer is here.

componente.ts:

onPrint()
    window.print();

componente.css:

@media print
  .doNotPrintdisplay:none !important;

Opcionalmente, también puede agregar otros elementos/secciones que no desea imprimir en la consulta de medios.

También puede cambiar los márgenes del documento y todo en la consulta de impresión, lo que lo hace bastante poderoso. Hay muchos artículos en línea. Aquí hay uno que parece completo: https://www.sitepoint.com/create-a-customized-print-stylesheet-in-minutes/ También significa que no tiene que crear una secuencia de comandos separada para crear una ‘versión impresa ‘ de la página o usar mucho javascript.

puedes hacer esto en angular 2

en el archivo ts

 export class Component          
      constructor()
      
       printToCart(printSectionId: string)
        let popupWinindow
        let innerContents = document.getElementById(printSectionId).innerHTML;
        popupWinindow = window.open('', '_blank', 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
        popupWinindow.document.open();
        popupWinindow.document.write('' + innerContents + '');
        popupWinindow.document.close();
  

 

en html

AngularJS Print html templates

First Name:

Last Name:


valoraciones y comentarios

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *