# print-iq-html

> An easy to use service to print a window or parts of a window (div). Printing of Angular Templates or Components is possible.

Latest version **1.0.2** (published 2022-04-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install print-iq-html
pnpm add print-iq-html
yarn add print-iq-html
bun add print-iq-html
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-04-23 |
| First published | 2022-04-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 101.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | cmonroyp |

## Links

- npm: https://www.npmjs.com/package/print-iq-html
- npm.io page: https://npm.io/package/print-iq-html

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.4.0

## Recent versions

- 1.0.2 (latest) — 2022-04-23
- 1.0.1 — 2022-04-23
- 1.0.0 — 2022-04-23

## README

# 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`:

```bash
npm install print-iq-html
```

Add wanted package to NgModule imports:

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

Need to import css

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

### 1# The first way doesn't need configuration

```html
<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

```html
<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>
```

```typescript
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

```typescript
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) {}
}
```

```html
<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](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 Angular 13 >= 13.0.0

---
_Source: https://npm.io/package/print-iq-html · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._