print-iq-html

print-iq-html

Proyecto para uso Personal,Tomado del Proyecto ngx-print-element creado por (DaiDH <duonghuudai.id002@gmail.com)

publicacion npm

entrar directamente a la carpeta (project), desde alli ejecutar el comando: ng build print-iq-html

una vez generada la compilacion entrar a la carpeta dist y desde alli publicar: npm publish

Installation

Install print-iq-html from npm:

npm install print-iq-html

Add wanted package to NgModule imports:

import { NgxPrintElementModule } from 'print-iq-html';
@NgModule({
    imports: [
        NgxPrintElementModule,
    ]
})

Need to import css

@import "~print-iq-html/styles.css";

1# The first way doesn't need configuration

<table id="demo">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr class="print-none">
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

<button [print]="['demo']">Print</button>

2# The second way needs configuration

<table id="demo">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr class="print-none">
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</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: "Report 01",
    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: [".table { color: red; }", ".table td { color: green; }"],
  };
}

Services

import { Component } from "@angular/core";
import { NgxPrintElementService } from "print-iq-html";
@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>

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 Angular 13 >= 13.0.0