
Security News
NIST Under Federal Audit for NVD Processing Backlog and Delays
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
ngx-print-element
Advanced tools
This library is built to provide a solution for printing on html elements.
This library is built to provide a solution for printing on html elements.
This is the stackblitz.
Install ngx-print-element
from npm
:
npm install ngx-print-element --save
Add wanted package to NgModule imports:
import { NgxPrintElementModule } from 'ngx-print-element';
@NgModule({
imports: [
NgxPrintElementModule,
]
})
Need to import css
@import '~ngx-print-element/styles.css';
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
<table id="demo" class="table table-bordered">
<tr>
<th>No</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr class="print-none" style="background: greenyellow"><!-- No print -->
<td>01</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>02</td>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>03</td>
<td>AIS Playground</td>
<td>Nakhon Pathom</td>
<td>Thailand</td>
</tr>
<tr class="print-none" style="background: greenyellow"> <!-- No print -->
<td>04</td>
<td>FPT Software</td>
<td>Cau Giay</td>
<td>Vietnamese</td>
</tr>
</table>
<button [print]="['demo']">Print</button>
<table id="demo" class="table table-bordered">
<tr>
<th>No</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr class="print-none" style="background: greenyellow"><!-- No print -->
<td>01</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>02</td>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>03</td>
<td>AIS Playground</td>
<td>Nakhon Pathom</td>
<td>Thailand</td>
</tr>
<tr class="print-none" style="background: greenyellow"> <!-- No print -->
<td>04</td>
<td>FPT Software</td>
<td>Cau Giay</td>
<td>Vietnamese</td>
</tr>
</table>
<button [print]="['demo', config]">Print</button>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public config = {
printMode: 'template-popup',
popupProperties: 'toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,fullscreen=yes',
pageTitle: 'Hello World',
templateString: '<header>I\'m part of the template header</header>{{printBody}}<footer>I\'m part of the template footer</footer>',
stylesheets: [{ rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' }],
styles: ['td { border: 1px solid black; color: green; }', 'table { border: 1px solid black; }', 'header, table, footer { margin: auto; text-align: center; }']
}
}
import { Component } from '@angular/core';
import { NgxPrintElementService } from 'ngx-print-element';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(public print: NgxPrintElementService) {}
}
<p id="demo">Angular-Print</p>
<button (click)="print.print('demo')">Print</button>
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 |
ng version | version |
---|---|
Angular 8 | 8.0.14 |
Angular 9 | 8.0.14-rc.1 |
Angular 14 | 2.0.15 |
Author: DaiDH
, Tel: 0845882882
MIT License. Copyright (c) 2022 DaiDH
FAQs
This library is built to provide a solution for printing on html elements.
The npm package ngx-print-element receives a total of 1,020 weekly downloads. As such, ngx-print-element popularity was classified as popular.
We found that ngx-print-element demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.
Security News
TypeScript Native Previews offers a 10x faster Go-based compiler, now available on npm for public testing with early editor and language support.