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


Print default


Print default

Template iframe

Template new window
`

#### 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!

Bitcoin	Paypal	MbBank

!Vietnam

MIT License. Copyright (c) 2022 DaiDH