ngx-print-element
This library is built to provide a solution for printing on html elements.\
This is the
Github,
Stackblitz .
!
Logo
Installation
Install
ngx-print-element from
npm:
``
bash
npm install ngx-print-element@ --save
`
Add wanted package to NgModule imports:
`
typescript
import { NgxPrintElementModule } from 'ngx-print-element';
@NgModule({
imports: [
NgxPrintElementModule,
]
})
`
Printing data sheet with id is up to you.\
If there is an element you don't want to display you can add the class `
print-none`
`
html
No |
Company |
Contact |
Country |
01 |
Alfreds Futterkiste |
Maria Anders |
Germany |
02 |
Centro comercial Moctezuma |
Francisco Chang |
Mexico |
03 |
AIS Playground |
Nakhon Pathom |
Thailand |
04 |
FPT Software |
Cau Giay |
Vietnamese |
`
`
typescript
import { Component, ElementRef, ViewChild } from '@angular/core';
import { NgxPrintElementService } from 'ngx-print-element';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('tableRef') tableElement: ElementRef;
public config: Config = {
printMode: 'template', // template-popup
popupProperties: 'toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,fullscreen=yes',
pageTitle: 'Hello World',
templateString: 'I\'m part of the template header{{printBody}}',
stylesheets: [{ rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' }],
styles: [
'header, footer{ text-align: center; }',
'body .bg-success{ background-color: #4dcf83 !important; }',
'body .bg-danger{ background-color: #f96868 !important; }',
]
}
constructor(public print: NgxPrintElementService) {}
onPrint1(el: ElementRef) {
this.print.print(el).subscribe(console.log);
}
onPrint2(el: ElementRef) {
this.print.print(el, this.config).subscribe(console.log);
}
onPrint3(el: ElementRef) {
this.print.print(el, { ...this.config, printMode: 'template-popup' }).subscribe(console.log);
}
}
`
`
html
`
#### API Documentation
| Field | Description | Type | Default |
| --- | --- | --- | --- |
| htmlType | domObj
,text
| string | 'domObj'
|
| printMode | template
,template-popup
| string | template` |
| popupProperties | Options
window.open | string | blank |
| pageTitle | Print title | string | blank |
| templateString | html | string | blank |
| stylesheets | Set the external style sheet for printing | object or object[] | null |
| styles | Set the internal style sheet for printing | string or string[] | null |
#### Support versions
Support versions |
Angular 18+ |
2.1.8 |
Angular 16+ |
2.1.6 |
Angular 6+ |
2.1.5 |
#### Author Information
Author Information |
Author |
DaiDH |
Phone |
+84845882882 |
Country |
Vietnam |
#### To make this library more complete, please donate to me if you can!
!
Vietnam
MIT License. Copyright (c) 2022 DaiDH