print-iq-html

Proyecto para uso Personal,Tomado del Proyecto ngx-print-element creado por (DaiDH <[email protected])

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