Print Html template in Angular 2 ng-print in Angular 2

Question

I want to print HTML template in angular 2  I had explored about this I got solution in angularjs 1 Print Html Template in Angularjs 1   Any suggestion would be appreciated

User · Answer

Use the library ngx-print   Installing   yarn add ngx-print or npm install ngx-print --save   Change your module   import  NgxPrintModule  from  ngx-print       imports        NgxPrintModule        Template    lt div id  print-section  gt       print content  lt  div gt   lt button ngxPrint printSectionId  print-section  gt Print lt  button gt    More details

User · Answer

Print service  import   Injectable   from   angular core     Injectable   export class PrintingService    public print printEl  HTMLElement        let printContainer  HTMLElement   document querySelector   print-container         if   printContainer          printContainer   document createElement  div          printContainer id    print-container               printContainer innerHTML            let elementCopy   printEl cloneNode true       printContainer appendChild elementCopy       document body appendChild printContainer        window print             omponent that I want to print   Component     selector   app-component     templateUrl     component component html     styleUrls      component component css      encapsulation  ViewEncapsulation None    export class MyComponent      ViewChild  printEl   printEl  ElementRef     constructor private printingService  PrintingService        public print    void       this printingService print this printEl nativeElement           Not the best choice  but works

User · Answer

EDIT  updated the snippets for a more generic approach  Just as an extension to the accepted answer   For getting the existing styles to preserve the look  n feel of the targeted component  you can    make a query to pull the  lt style gt  and  lt link gt  elements from the top-level document inject it into the HTML string    To grab a HTML tag   private getTagsHtml tagName  keyof HTMLElementTagNameMap   string       const htmlStr  string             const elements   document getElementsByTagName tagName       for  let idx   0  idx  lt  elements length  idx                  htmlStr push elements idx  outerHTML              return htmlStr join   r n        Then in the existing snippet   const printContents   document getElementById  print-section   innerHTML  const stylesHtml   this getTagsHtml  style    const linksHtml   this getTagsHtml  link     const popupWin   window open       blank    top 0 left 0 height 100  width auto    popupWin document open    popupWin document write        lt html gt           lt head gt               lt title gt Print tab lt  title gt                linksHtml                stylesHtml                            add them as usual to the head          lt  head gt           lt body onload  window print    window close    gt                printContents           lt  body gt       lt  html gt           popupWin document close      Now using existing styles  Angular components create a minted style for itself   as well as existing style frameworks  e g  Bootstrap  MaterialDesign  Bulma  it should look like a snippet of the existing screen

User · Answer

Shortest solution to be assign the window to a typescript variable then call the print method on that  like below   in template file   lt button      click   window print        gt Submit lt  button gt    and  in typescript file  window  any  constructor       this window   window

User · Answer

The best option I found to solve this without getting into trouble with my styles was using a separate route for my printed output and load this route into an iframe   My surrounding component is shown as a tab page    Component     template    lt iframe id  printpage  name  printpage   ngIf  printSrc   src   printSrc  gt  lt  iframe gt      styleUrls     previewTab scss       export class PreviewTabPage     printSrc  SafeUrl     constructor      private navParams  NavParams      private sanitizer  DomSanitizer               item to print is passed as url parameter     const itemId   navParams get  itemId            set print page source for iframe in template     this printSrc   this sanitizer bypassSecurityTrustResourceUrl this getAbsoluteUrl itemId           getAbsoluteUrl itemId  string   string          some code to generate an absolute url for your item     return itemUrl          The iframe just loads the print route that renders a print component in the app  In this page the print might be triggered after the view is fully initialized  Another way could be a print button on the parent component that triggers the print on the iframe by window frames  printpage   print       Component     templateUrl     print html     styleUrls     print scss       export class PrintPage implements AfterViewInit      constructor         ngAfterViewInit            wait some time  so all images or other async data are loaded   rendered         print could be triggered after button press in the parent component as well      setTimeout      gt             print current iframe       window print           2000

User · Answer

I ran into the same issue and found another way to do this  It worked for in my case as it was a relatively small application   First  the user will a click button in the component which needs to be printed  This will set a flag that can be accessed by the app component  Like so   html file   lt button mat-button  click   printMode    gt Print Preview lt  button gt     ts file    printMode         this utilities printMode   true        In the html of the app component  we hide everything except the router-outlet  Something like below   lt div class  container  gt            lt app-header  ngIf   utilities printMode  gt  lt  app-header gt     lt mat-sidenav-container gt       lt mat-sidenav  ngIf    utilities printMode  gt         lt app-sidebar gt  lt  app-sidebar gt       lt  mat-sidenav gt       lt mat-sidenav-content gt         lt router-outlet gt  lt  router-outlet gt       lt  mat-sidenav-content gt     lt  mat-sidenav-container gt   lt  div gt    With similar ngIf conidtions  we can also adjust the html template of the component to only show or hide things in printMode  So that the user will see only what needs to get printed when print preview is clicked    We can now simply print or go back to normal mode with the below code   html file   lt button mat-button class  doNotPrint   click   print    gt Print lt  button gt   lt button mat-button class  doNotPrint   click   endPrint    gt Close lt  button gt     ts file    print         window print           endPrint         this utilities printMode   false          css file  so that the print and close button s don t get printed    media print      doNotPrint display none  important

User · Answer

If you need to print some custom HTML  you can use this method   ts       let control Print       control Print   document getElementById    printingFrame         let doc   control Print contentWindow document      doc open        doc write   lt div style  color red   gt I WANT TO PRINT THIS  NOT THE CURRENT HTML lt  div gt         doc close         control Print   control Print contentWindow      control Print focus        control Print print      html    lt iframe title  Lets print  id    printingFrame  style  width  0  height  0  border  0  gt  lt  iframe gt

User · Answer

Windows applications usually come with build in print capability  but for a web application  I would choose to simply generate a PDF file   The simplest way that I found is to generate a PDf file using PDFMake  www pdfmake org   You can then offer the user the choice to open or download the generated PDF file

User · Answer

That s how I ve done it in angular2  it is similar to that plunkered solution  In your HTML file    lt div id  print-section  gt       your html stuff that you want to print  lt  div gt   lt button  click   print    gt print lt  button gt    and in your TS file    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          lt html gt           lt head gt             lt title gt Print tab lt  title gt             lt style gt                      Customized style                   lt  style gt           lt  head gt       lt body onload  window print   window close    gt   printContents  lt  body gt         lt  html gt              popupWin document close          UPDATE   You can also shortcut the path and use merely ngx-print library for less inconsistent coding  mixing JS and TS  and more out-of-the-box controllable and secured printing cases

User · Answer

you can do like this in angular 2   in ts file   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   lt html gt  lt head gt  lt link rel  stylesheet  type  text css  href  style css    gt  lt  head gt  lt body onload  window print    gt     innerContents     lt  html gt             popupWinindow document close              in html   lt div id  printSectionId   gt     lt div gt       lt h1 gt AngularJS Print html templates lt  h1 gt       lt form novalidate gt        First Name         lt input type  text   class  tb8  gt         lt br gt         lt br gt  Last Name         lt input type  text   class  tb8  gt         lt br gt         lt br gt         lt button  class  button  gt Submit lt  button gt         lt button  click   printToCart  printSectionId    class  button  gt Print lt  button gt       lt  form gt     lt  div gt     lt div gt       lt br  gt      lt  div gt   lt  div gt

User · Answer

In case anyone else comes across this problem  if you have already laid the page out  I would recommend using media queries to set up your print page   You can then simply attach a print function to your html button and in your component call window print     component html    lt div class  doNotPrint  gt      Header is here   lt  div gt    lt div gt      all my beautiful print-related material is here   lt  div gt    lt div class  doNotPrint  gt      my footer is here       lt button  click   onPrint    gt Print lt  button gt   lt  div gt    component ts   onPrint        window print        component css    media print     doNotPrint display none  important       You can optionally also add other elements   sections you do not wish to print in the media query   You can change the document margins and all in the print query as well  which makes it quite powerful   There are many articles online  Here is one that seems comprehensive  https   www sitepoint com create-a-customized-print-stylesheet-in-minutes    It also means you don t have to create a separate script to create a  print version  of the page or use lots of javascript

[javascript] Print Html template in Angular 2 (ng-print in Angular 2)

Examples related to javascript

Examples related to angularjs

Examples related to angular