https://github.com/id1945/ngx-print-element
This library is built to provide a solution for printing on html elements.
https://github.com/id1945/ngx-print-element
angular angular-print angular2 angular4 angular6 ng-print ngx ngx-print ngx-print-element printing
Last synced: 4 months ago
JSON representation
This library is built to provide a solution for printing on html elements.
- Host: GitHub
- URL: https://github.com/id1945/ngx-print-element
- Owner: id1945
- License: mit
- Created: 2021-09-12T16:52:19.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-11-17T15:30:53.000Z (over 1 year ago)
- Last Synced: 2025-02-01T00:51:11.321Z (4 months ago)
- Topics: angular, angular-print, angular2, angular4, angular6, ng-print, ngx, ngx-print, ngx-print-element, printing
- Language: HTML
- Homepage: https://id1945.github.io/ngx-print-element
- Size: 566 KB
- Stars: 6
- Watchers: 3
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-print-element
This library is built to provide a solution for printing on html elements.\
This is the [Github](https://id1945.github.io/ngx-print-element), [Stackblitz](https://stackblitz.com/edit/angular-ngx-print-element) .
## 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}}I\'m part of the template footer',
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](https://www.w3schools.com/jsref/met_win_open.asp) | 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 16
2.1.4
Angular 6
2.1.3
#### 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
[MIT License](https://github.com/id1945/ngx-print-element/blob/master/LICENSE). Copyright (c) 2022 DaiDH