This directive makes printing your HTML sections smooth and easy in your Angular application. It is inspired from the old AngularJS ngPrint directive, thus it is intendend to be used with the new Angular -2/4/5/6/7-... Enjoy ! contributions are so welcomed :)
| ngx-print | Angular |
|---|---|
| 1.2.1 | 7.0.0 - 14.1.0 |
| 1.3.x | 15.0.0 |
| 1.4.x | 16.0.0 |
| 1.5.x | 17.0.0 |
1- In your root application folder run:
$ npm install ngx-print2- Once ngx-print is installed, you need to import the main module NgxPrintModule :
import {NgxPrintModule} from 'ngx-print';
@NgModule({
...
imports: [NgxPrintModule, ...],
...
})
export class YourAppModule {
}3- Then plug n' play with it:
- Assuming you want to print the following HTML section:
<div>
<!--Your html stuff that you want to print-->
</div>
<button>print</button> <!--Your relevant print button-->- Now, what you have to do is tagging your wanted-to-print section by an
idattribute, then link thatidto a directive parameter in your button :
<!--
1)- Add an ID here
-->
<div id="print-section">
<!--Your html stuff that you want to print-->
</div>
<!--
2)- Add the directive name in your button (ngxPrint),
3)- Affect your ID to printSectionId
-->
<button printSectionId="print-section" ngxPrint>print</button> - You want a customized title for your printing window ? you have the choice by adding a new attribute to your print button
printTitle:
<div id="print-section">
<!-- ... -->
</div>
<button
printTitle="MyTitle"
printSectionId="print-section"
ngxPrint>print</button>- Also, would you like to customize the printing window style sheet (CSS) ? Hence you can do so by adding infinite styles to another attribute called
printStyle:
<div id="print-section">
<!-- ... -->
</div>
<button
[printStyle]="{h1 : {'color': 'red'}, h2 : {'border': 'solid 1px'}}"
printSectionId="print-section"
ngxPrint>print</button>Here some simple styles were added to every h1 & h2 tags within the div where print-section is tagged to its id attribute.
- If you would like to use your existing CSS with media print you can add the
useExistingCssattribute:
<div id="print-section">
<!-- ... -->
</div>
<button
[useExistingCss]="true"
printSectionId="print-section"
ngxPrint>print</button>- If you want to customize the printing window style sheet (CSS) by importing the css provided in assets/css use
styleSheetFile:
<div id="print-section">
<!-- ... -->
</div>
<button
styleSheetFile="assets/css/custom1.css,assets/css/custom2.css"
printSectionId="print-section"
ngxPrint>print</button>- If you would like to show a preview without a print dialog use
previewOnly:
<div id="print-section">
<!-- ... -->
</div>
<button
[previewOnly]="true"
printSectionId="print-section"
ngxPrint>print</button>- Some print operations open a second dialog, and automatically closing the popup window happens before the second dialog opens. Set
closeWindowto false to handle print operations that open a second dialog, like "Microsoft Print to PDF", or "Print using system dialog...":
<div id="print-section">
<!-- ... -->
</div>
<button
[closeWindow]="false"
printSectionId="print-section"
ngxPrint>print</button>- Set
bodyClassto whatever class values are needed for some of your css rules that expect an ancestor to have a certain class. For example, a theme selector:
<div id="print-section">
<!-- ... -->
</div>
<button
[bodyClass]="theme-dark"
printSectionId="print-section"
ngxPrint>print</button>- To print in a new tab rather than a new window set the property
openNewTabto true. By defaultopenNewTabis false and ngxPrint will open a new print window.
<button
[openNewTab]="true"
ngxPrint>print</button>Inject the NgxPrintService in the constructor of your component or service:
constructor(private printService: NgxPrintService) { }import { PrintOptions } from './path-to-your/print-options.model';
printMe() {
const customPrintOptions: PrintOptions = new PrintOptions({
printSectionId: 'print-section',
// Add any other print options as needed
});
this.printService.print(customPrintOptions)
}The print options object allows you to specify how the print job should be handled. All of which have default values that you can optionally override, although printSectionId is required. It contains the following properties:
printSectionId: string = null;
printTitle: string = null;
useExistingCss: boolean = false;
bodyClass: string = '';
openNewTab: boolean = false;
previewOnly: boolean = false;
closeWindow: boolean = true;
printDelay: number = 0;// Optional property for css as a key-value pair
this.printService.printStyle = styleSheet;
// Optional property for a css file location
this.printService.styleSheetFile = fileLocation;Huge thanks to: deeplotia , Ben L , Gavyn McKenzie , silenceway, Muhammad Ahsan Ayaz, Core121 and to all ngx-print users
Did this project help you reducing time? I won't say no to a cup of coffee ๐ต :)
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent