Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
ngx-printer
Advanced tools
An easy to use service to print a window or parts of a window (div). Printing of Angular Templates or Components is possible.
A easy to use service to print a window, parts of a window (divs) 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 other usefull directives can further assist you.
See the DEMO App and DEMO-Page for examples.
Easy start
The easiest way to print an HTML Element is HTML:
<div ngxPrintItemMarker directPrint="true"></div>
The service prints by opening a new window. There is an option printWindowOpen to change this behavoir. Set printWindowOpen=false;
You can also set this option in .forRoot while importing the module to the app.module
imports: [
BrowserModule,
NgxPrinterModule.forRoot({printOpenWindow: true})
],
Before openening the print window the service to some time to render the print content. Default time is 200ms. You can adjust the time using the property timeToWaitRender (also in forRoot).
When printing to the current window the service creates an component with a css-class called 'default'. You can override this class name using the property renderClass (also in forRoot). Make sure that the class is placed in your global styles (styles.css).
When printing to the current window the service searches the app-root component. If you have changed the name of the root component in your app you can override the name using the property appRootName.
The maker image is placed to the bottom left. You can change this by changing the property markerPosition. Use a value of the enum ngxPrintMarkerPosition (TopLeft, .TopRight, .BottomLeft, .BottomRight).
this.printerService.printCurrentWindow();
this.printerService.printDiv('idOfDivToPrint');
this.printerService.printImg('assets/bratwurst.jpg');
@ViewChild('PrintTemplate')
private PrintTemplateTpl: TemplateRef<any>;
printTemplate() {
this.printerService.printAngular(this.PrintTemplateTpl);
}
Beware: To print a component the component needs to be known by service (copy source and add it to entry component of app.module). Otherwise use printHTMLElement instead.
@ViewChild(LittleDummyComponent, {read: ElementRef}) PrintComponent: ElementRef;
printHTMLElementToCurrent() {
this.printerService.printHTMLElement(this.PrintComponent.nativeElement);
}
If you want to check whether the print window is open or not you can subscribe to observable $printWindowOpen
this.printWindowSubscription = this.printerService.$printWindowOpen.subscribe(val => {
console.log('Print window is open:', val);
});
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.
Use the async pipe to subscribe and the function printPrintItem
to print the item.
HTML:
<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>
TS:
printItem(itemToPrint: PrintItem) {
this.printerService.printPrintItem(itemToPrint);
}
});
If you want to print a single item from the list of ngxPrintItems (see above) or other HTML-elements without ts you can use the diretive ngxPrintItemButton. You can use
The Click-Event to print the item will be automatically set.
HTML:
<button ngxPrintItemButton printItemId="firstPrintItem">Print first item directly</button>
<button ngxPrintItemButton className="printident">
Print item by className with this button
</button>
<button ngxPrintItemButton divID="printDiv">
Print div by id with this button
</button>
<button ngxPrintItemButton printWindow="true"> Print whole window with this button </button>
If you want to indicate an item as printable you can use this directive. The default class adds a little printer symbol to the top left of the html element.
Just display marker.
HTML:
<div ngxPrintItemMarker>
If you click the little printer print starts immediately.
HTML:
<div ngxPrintItemMarker directPrint="true"></div>
You can override the default class with the customClass
property.
Make sure that the css class is globally accessable e.g. put it into "styles.css".
You can also only override the image using the property backgroundImage
. You can
speficy the data for the background-url.
You can listen to the event printClicked
.
HTML:
<div id="printDivMarker" ngxPrintItemMarker (printClicked)="printerMarkerClicked()">
<div id="printDivMarker" ngxPrintItemMarker customClass="mymarker" >
..if you like this lib ;-)
FAQs
An easy to use service to print a window or parts of a window (div). Printing of Angular Templates or Components is possible.
The npm package ngx-printer receives a total of 1,878 weekly downloads. As such, ngx-printer popularity was classified as popular.
We found that ngx-printer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.