{"id":14973219,"url":"https://github.com/id1945/ngx-print-element","last_synced_at":"2025-06-25T12:33:42.914Z","repository":{"id":57777886,"uuid":"405699677","full_name":"id1945/ngx-print-element","owner":"id1945","description":"This library is built to provide a solution for printing on html elements. ","archived":false,"fork":false,"pushed_at":"2023-11-17T15:30:53.000Z","size":580,"stargazers_count":6,"open_issues_count":1,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-01T00:51:11.321Z","etag":null,"topics":["angular","angular-print","angular2","angular4","angular6","ng-print","ngx","ngx-print","ngx-print-element","printing"],"latest_commit_sha":null,"homepage":"https://id1945.github.io/ngx-print-element","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/id1945.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-12T16:52:19.000Z","updated_at":"2024-12-04T03:20:37.000Z","dependencies_parsed_at":"2023-11-07T13:39:25.713Z","dependency_job_id":"a297e4e3-677a-4b03-825f-c70aa696eab3","html_url":"https://github.com/id1945/ngx-print-element","commit_stats":{"total_commits":1,"total_committers":1,"mean_commits":1.0,"dds":0.0,"last_synced_commit":"673f57302ecc026fee78ae71e7c8e2a626d2fd60"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-print-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-print-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-print-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-print-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/id1945","download_url":"https://codeload.github.com/id1945/ngx-print-element/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238408630,"owners_count":19467140,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-print","angular2","angular4","angular6","ng-print","ngx","ngx-print","ngx-print-element","printing"],"created_at":"2024-09-24T13:48:23.981Z","updated_at":"2025-02-12T03:31:23.741Z","avatar_url":"https://github.com/id1945.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-print-element\n\nThis library is built to provide a solution for printing on html elements.\\\nThis is the [Github](https://id1945.github.io/ngx-print-element), [Stackblitz](https://stackblitz.com/edit/angular-ngx-print-element) .\n\n![Logo](https://raw.githubusercontent.com/id1945/ngx-print-element/master/ngx-print-element.png)\n\n## Installation\nInstall `ngx-print-element` from `npm`:\n```bash\nnpm install ngx-print-element@\u003cversion\u003e --save\n```\n\nAdd wanted package to NgModule imports:\n```typescript\nimport { NgxPrintElementModule } from 'ngx-print-element';\n@NgModule({\n    imports: [\n        NgxPrintElementModule,\n    ]\n})\n```\n\nPrinting data sheet with id is up to you.\\\nIf there is an element you don't want to display you can add the class ```print-none```\n\n```html\n\u003ctable #tableRef ngxPrintElement\u003e\n  \u003ctr\u003e\n    \u003cth\u003eNo\u003c/th\u003e\n    \u003cth\u003eCompany\u003c/th\u003e\n    \u003cth\u003eContact\u003c/th\u003e\n    \u003cth\u003eCountry\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e01\u003c/td\u003e\n    \u003ctd\u003eAlfreds Futterkiste\u003c/td\u003e\n    \u003ctd\u003eMaria Anders\u003c/td\u003e\n    \u003ctd\u003eGermany\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd class=\"bg-success\"\u003e02\u003c/td\u003e\n    \u003ctd class=\"bg-success\"\u003eCentro comercial Moctezuma\u003c/td\u003e\n    \u003ctd class=\"bg-success\"\u003eFrancisco Chang\u003c/td\u003e\n    \u003ctd class=\"bg-success\"\u003eMexico\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e03\u003c/td\u003e\n    \u003ctd\u003eAIS Playground\u003c/td\u003e\n    \u003ctd\u003eNakhon Pathom\u003c/td\u003e\n    \u003ctd\u003eThailand\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr class=\"print-none\"\u003e \u003c!-- No print --\u003e\n    \u003ctd class=\"bg-danger\"\u003e04\u003c/td\u003e\n    \u003ctd class=\"bg-danger\"\u003eFPT Software\u003c/td\u003e\n    \u003ctd class=\"bg-danger\"\u003eCau Giay\u003c/td\u003e\n    \u003ctd class=\"bg-danger\"\u003eVietnamese\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n```\n\n```typescript\nimport { Component, ElementRef, ViewChild } from '@angular/core';\nimport { NgxPrintElementService } from 'ngx-print-element';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n  @ViewChild('tableRef') tableElement: ElementRef\u003cHTMLTableElement\u003e;\n\n  public config: Config = {\n    printMode: 'template', // template-popup\n    popupProperties: 'toolbar=yes,scrollbars=yes,resizable=yes,top=0,left=0,fullscreen=yes',\n    pageTitle: 'Hello World',\n    templateString: '\u003cheader\u003eI\\'m part of the template header\u003c/header\u003e{{printBody}}\u003cfooter\u003eI\\'m part of the template footer\u003c/footer\u003e',\n    stylesheets: [{ rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' }],\n    styles: [\n      'header, footer{ text-align: center; }',\n      'body .bg-success{ background-color: #4dcf83 !important; }',\n      'body .bg-danger{ background-color: #f96868 !important; }',\n    ]\n  }\n\n  constructor(public print: NgxPrintElementService) {}\n\n  onPrint1(el: ElementRef\u003cHTMLTableElement\u003e) {\n    this.print.print(el).subscribe(console.log);\n  }\n\n  onPrint2(el: ElementRef\u003cHTMLTableElement\u003e) {\n    this.print.print(el, this.config).subscribe(console.log);\n  }\n\n  onPrint3(el: ElementRef\u003cHTMLTableElement\u003e) {\n    this.print.print(el, { ...this.config, printMode: 'template-popup' }).subscribe(console.log);\n  }\n}\n```\n\n```html\n\u003c!-- default --\u003e\n\u003cngx-print-element #element=\"element\"\u003e\n  \u003cbutton (click)=\"element?.print(tableElement)\"\u003ePrint default\u003c/button\u003e\n\u003c/ngx-print-element\u003e\n\u003c!-- default --\u003e\n\u003cbutton (click)=\"onPrint1(tableElement)\"\u003ePrint default\u003c/button\u003e\n\u003c!-- iframe --\u003e\n\u003cbutton (click)=\"onPrint2(tableElement)\"\u003eTemplate iframe\u003c/button\u003e\n\u003c!-- window.open --\u003e\n\u003cbutton (click)=\"onPrint3(tableElement)\"\u003eTemplate new window\u003c/button\u003e\n```\n\n#### API Documentation\n\n| Field | Description | Type | Default |\n| --- | --- | --- | --- |\n| htmlType | `domObj`,`text` | string | `'domObj'` |\n| printMode | `template`,`template-popup` | string | `template` |\n| popupProperties | Options [window.open](https://www.w3schools.com/jsref/met_win_open.asp) | string | blank |\n| pageTitle | Print title | string | blank |\n| templateString | html | string | blank |\n| stylesheets | Set the external style sheet for printing | object or object[] | null |\n| styles | Set the internal style sheet for printing | string or string[] | null |\n\n\n#### Support versions\n  \n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth colspan=\"2\"\u003eSupport versions\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eAngular 16\u003c/td\u003e\n    \u003ctd\u003e2.1.4\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eAngular 6\u003c/td\u003e\n    \u003ctd\u003e2.1.3\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Author Information\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth colspan=\"2\"\u003eAuthor Information\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eAuthor\u003c/td\u003e\n    \u003ctd\u003eDaiDH\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ePhone\u003c/td\u003e\n    \u003ctd\u003e+84845882882\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eCountry\u003c/td\u003e\n    \u003ctd\u003eVietnam\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### To make this library more complete, please donate to me if you can!\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eBitcoin\u003c/th\u003e\n    \u003cth\u003ePaypal\u003c/th\u003e\n    \u003cth\u003eMbBank\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/id1945/id1945/master/donate-bitcoin.png\" width=\"182px\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/id1945/id1945/master/donate-paypal.png\" width=\"182px\"\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/id1945/id1945/master/donate-mbbank.png\" width=\"182px\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n![Vietnam](https://raw.githubusercontent.com/id1945/id1945/master/vietnam.gif)\n\n[MIT License](https://github.com/id1945/ngx-print-element/blob/master/LICENSE). Copyright (c) 2022 DaiDH\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fid1945%2Fngx-print-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fid1945%2Fngx-print-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fid1945%2Fngx-print-element/lists"}