npm i ngx-printer
NgxPrinterDemo
A easy to use service to print the window, parts of a window (div) or an image. Printing of Angular Templates or Components is possible.
You can print opening a new window / tab or using the current window. A directive can also be used to mark and store an HTML-element.
Several usefull directives can further assist you.
See the DEMO App and DEMO-Page for examples.
Usage
- Add to main app.module imports
- Use the NgxPrinterService where you like via DI (private printerService: NgxPrinterService)
- Use the the functions provided by the service
Easy start
The easiest way to print an HTML Element is HTML:
|
1 |
<div ngxPrintItemMarker directPrint="true"></div> |
|
1 2 3 4 |
imports: [ BrowserModule, NgxPrinterModule.forRoot({printOpenWindow: true}) ], |
|
1 2 3 4 5 6 |
@ViewChild('PrintTemplate') private PrintTemplateTpl: TemplateRef<any>; printTemplate() { this.printerService.printAngular(this.PrintTemplateTpl); } |
|
1 2 3 |
this.printWindowSubscription = this.printerService.$printWindowOpen.subscribe(val => { console.log('Print window is open:', val); }); |
Directive ngxPrintItem
There is an directive ngxPrintItem to mark and store an HTML-Element as an item which can be printed later and anyhwere on the page. An id has to be set. These items are stored in the services observable printerService.$printItems.
function ‘printPrintItem’
Use the async pipe to subscribe and then call the function printPrintItem to print one item.
HTML:
|
1 2 3 4 5 6 |
<span id="firstPrintItem" ngxPrintItem printName="First one" >A <b>first</b> span with an ngxPrintItem directive</span> <div *ngFor="let prinItem of $printItems | async"> <span>{{prinItem.id}} - {{prinItem.printName}}</span> <button (click)="printItem(prinItem)">Print me!</button> </div> |
|
1 2 3 4 |
printItem(itemToPrint: PrintItem) { this.printerService.printPrintItem(itemToPrint); } }); |
https://www.npmjs.com/package/ngx-printer
