{"id":21827489,"url":"https://github.com/laixiangran/e-ngx-print","last_synced_at":"2025-04-14T05:43:19.136Z","repository":{"id":41300847,"uuid":"88521417","full_name":"laixiangran/e-ngx-print","owner":"laixiangran","description":"基于Angular的打印组件，可打印HTML和文本","archived":false,"fork":false,"pushed_at":"2020-12-30T15:43:46.000Z","size":7968,"stargazers_count":35,"open_issues_count":5,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-10T17:44:52.606Z","etag":null,"topics":["angular","print"],"latest_commit_sha":null,"homepage":"http://www.laixiangran.cn/e-ngx-print/demo/","language":"TypeScript","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/laixiangran.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-17T15:23:12.000Z","updated_at":"2024-03-23T14:34:43.000Z","dependencies_parsed_at":"2022-09-09T10:50:58.034Z","dependency_job_id":null,"html_url":"https://github.com/laixiangran/e-ngx-print","commit_stats":null,"previous_names":["laixiangran/essence-ng2-print"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-print","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-print/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-print/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-print/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laixiangran","download_url":"https://codeload.github.com/laixiangran/e-ngx-print/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248830420,"owners_count":21168272,"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","print"],"created_at":"2024-11-27T18:13:17.719Z","updated_at":"2025-04-14T05:43:19.115Z","avatar_url":"https://github.com/laixiangran.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# e-ngx-print\n\n基于Angular的打印组件，可打印HTML和文本。\n\n## Usage\n\n1. Install\n\n\t```shell\n\tnpm install --save e-ngx-print@latest\n\t```\n\n2. Add the ENgxPrintModule\n\n\t```typescript\n\timport {ENgxPrintModule} from \"e-ngx-print\";\n\t@NgModule({\n\t    imports: [\n\t        ENgxPrintModule\n\t    ]\n\t})\n\t```\n\n3. Use in Template\n\n\t```html\n\t\u003cdiv id=\"print_div\" #print_div\u003e\n        \u003ctable class=\"table table-striped\"\u003e\n            \u003cthead *ngIf=\"showHead\"\u003e\n            \u003ctr\u003e\n                \u003cth\u003e#\u003c/th\u003e\n                \u003cth id=\"th_green\"\u003eFirst Name\u003c/th\u003e\n                \u003cth\u003eLast Name\u003c/th\u003e\n                \u003cth\u003eUsername\u003c/th\u003e\n            \u003c/tr\u003e\n            \u003c/thead\u003e\n            \u003ctbody\u003e\n            \u003ctr *ngFor=\"let user of datas; let i = index\"\u003e\n                \u003ctd class=\"td_blue\"\u003e{{i}}\u003c/td\u003e\n                \u003ctd\u003e{{user?.firstName}}\u003c/td\u003e\n                \u003ctd\u003e{{user?.lastName}}\u003c/td\u003e\n                \u003ctd\u003e{{user?.userName}}\u003c/td\u003e\n            \u003c/tr\u003e\n            \u003c/tbody\u003e\n        \u003c/table\u003e\n        \u003ctable *ngIf=\"hideTable1\" id=\"table1\" class=\"table table-striped\"\u003e\n            \u003cthead\u003e\n            \u003ctr\u003e\n                \u003cth\u003e#\u003c/th\u003e\n                \u003cth\u003eFirst Name\u003c/th\u003e\n                \u003cth\u003eLast Name\u003c/th\u003e\n                \u003cth\u003eUsername\u003c/th\u003e\n            \u003c/tr\u003e\n            \u003c/thead\u003e\n            \u003ctbody\u003e\n            \u003ctr *ngFor=\"let user of datas; let i = index\"\u003e\n                \u003ctd\u003e{{i}}\u003c/td\u003e\n                \u003ctd\u003e{{user?.firstName}}\u003c/td\u003e\n                \u003ctd\u003e{{user?.lastName}}\u003c/td\u003e\n                \u003ctd\u003e{{user?.userName}}\u003c/td\u003e\n            \u003c/tr\u003e\n            \u003c/tbody\u003e\n        \u003c/table\u003e\n    \u003c/div\u003e\n    \u003ch2\u003e两种打印模式（iframe and popup）- 打印指定html\u003c/h2\u003e\n    \u003cdiv\u003e\n        \u003ce-ngx-print\n            [btnText]=\"'iframe模式'\"\n            [btnClass]=\"{'btn': true, 'btn-success': true}\"\n            [printHTML]=\"print_div\"\n            [printStyle]=\"printStyle\"\n            [printCSS]=\"printCSS\"\n            (printComplete)=\"printComplete()\"\u003e\n        \u003c/e-ngx-print\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n        \u003ce-ngx-print\n            [mode]=\"'popup'\"\n            [popTitle]=\"'表格打印'\"\n            [btnText]=\"'popup模式'\"\n            [btnClass]=\"{'btn': true, 'btn-warning': true}\"\n            [printHTML]=\"print_div\"\n            [printStyle]=\"printStyle\"\n            [printCSS]=\"printCSS\"\n            (printComplete)=\"printComplete()\"\u003e\n        \u003c/e-ngx-print\u003e\n    \u003c/div\u003e\n    \u003ch2\u003e打印指定字符串\u003c/h2\u003e\n    \u003cdiv\u003e\n        \u003ce-ngx-print\n            [btnText]=\"'iframe模式'\"\n            [btnClass]=\"{'btn': true, 'btn-success': true}\"\n            [printHTML]=\"editorText\"\n            (printComplete)=\"printComplete()\"\u003e\n        \u003c/e-ngx-print\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n        \u003ce-ngx-print\n            [mode]=\"'popup'\"\n            [popTitle]=\"'表格打印'\"\n            [btnText]=\"'popup模式'\"\n            [btnClass]=\"{'btn': true, 'btn-warning': true}\"\n            [printHTML]=\"editorText\"\n            (printComplete)=\"printComplete()\"\u003e\n        \u003c/e-ngx-print\u003e\n    \u003c/div\u003e\n    \u003ch2\u003e自定义打印（将隐藏的html显示并打印）\u003c/h2\u003e\n    \u003cdiv\u003e\n        \u003ce-ngx-print #print1\n                           [showBtn]=\"false\"\n                           [printStyle]=\"printStyle\"\n                           [printCSS]=\"printCSS\"\n                           (printComplete)=\"printComplete()\"\u003e\n        \u003c/e-ngx-print\u003e\n        \u003cbutton class=\"btn btn-success\" (click)=\"customPrint('print1')\"\u003eiframe模式\u003c/button\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n        \u003ce-ngx-print #print2\n                           [mode]=\"'popup'\"\n                           [popTitle]=\"'表格打印'\"\n                           [showBtn]=\"false\"\n                           [printHTML]=\"print_div\"\n                           [printStyle]=\"printStyle\"\n                           [printCSS]=\"printCSS\"\n                           (printComplete)=\"printComplete()\"\u003e\n        \u003c/e-ngx-print\u003e\n        \u003cbutton class=\"btn btn-warning\" (click)=\"customPrint('print2')\"\u003epopup模式\u003c/button\u003e\n    \u003c/div\u003e\n\t```\n\n4. Use in Component\n\n\t```typescript\n\t@ViewChild('print1') printComponent1: ENgxPrintComponent;\n    @ViewChild('print2') printComponent2: ENgxPrintComponent;\n\n    showHead: boolean = true;\n    hideTable1: boolean = false;\n    datas: any[];\n    printCSS: string[];\n    printStyle: string;\n    editorText = '\u003cp style=\"text-align:center;line-height:150%\"\u003e\u003cstrong\u003e\u003cspan style=\"font-family: 宋体;line-height: 150%;font-size: 21px\"\u003e\u003cspan style=\"font-family:宋体\"\u003e关于\u003c/span\u003e××××工程项目划分的请示（函）\u003c/span\u003e\u003c/strong\u003e\u003cspan style=\"font-family: 宋体; font-size: 21px; text-indent: 315px;\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/p\u003e\u003cp style=\"line-height:150%\"\u003e\u003cstrong\u003e\u003cspan style=\"font-family: 宋体;line-height: 150%;font-size: 16px\"\u003e海淀区水利工程质量监督站：\u003c/span\u003e\u003c/strong\u003e\u003c/p\u003e\u003cp style=\"text-indent:38px;line-height:150%\"\u003e\u003cspan style=\";font-family:宋体;line-height:150%;font-size:16px\"\u003e××××工程，依据××××文件开始建设。（简述工程概况和主要工程量）。\u003c/span\u003e\u003c/p\u003e\u003cp style=\"text-indent:38px;line-height:150%\"\u003e\u003cspan style=\";font-family:宋体;line-height:150%;font-size:16px\"\u003e\u003cspan style=\"font-family:宋体\"\u003e根据《水利水电工程施工质量检验与评定规程》\u003c/span\u003eSL176-2007）、《水利水电基本建设工程单元工程质量评定标准》（SDJ249-88）及《北京市水利工程施工质量评定标准》等有关规定，结合本工程的实际情况，经研究确认本工程项目共划分为××个单位工程，××个分部工程，××个单元工程。其中主要单位工程××个，分别为 \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;；主要分部工程××个，分别为 \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;；重要隐蔽单元工程××个，分别为 \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;；关键部位单元工程××个，分别为 \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;。具体划分见附表。\u003c/span\u003e\u003c/p\u003e\u003cp style=\"text-indent:38px;line-height:150%\"\u003e\u003cspan style=\";font-family:宋体;line-height:150%;font-size:16px\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/p\u003e\u003cp style=\"text-indent:38px;line-height:150%\"\u003e\u003cspan style=\";font-family:宋体;line-height:150%;font-size:16px\"\u003e\u003cspan style=\"font-family:宋体\"\u003e附表：\u003c/span\u003e××××工程项目划分表\u003c/span\u003e\u003c/p\u003e\u003cp style=\"text-indent:38px;line-height:150%\"\u003e\u003cspan style=\";font-family:宋体;line-height:150%;font-size:16px\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/p\u003e\u003cp style=\"text-indent:38px;line-height:150%\"\u003e\u003cspan style=\";font-family:宋体;line-height:150%;font-size:16px\"\u003e\u0026nbsp;\u003c/span\u003e\u003c/p\u003e\u003cp style=\"text-indent: 406px; line-height: 150%; text-align: right;\"\u003e\u003cspan style=\";font-family:宋体;line-height:150%;font-size:16px\"\u003e××××××（单位）\u003c/span\u003e\u003c/p\u003e\u003cp style=\"text-indent: 398px; line-height: 150%; text-align: right;\"\u003e\u003cspan style=\";font-family:宋体;line-height:150%;font-size:16px\"\u003e××××年××月××日\u003c/span\u003e\u003c/p\u003e';\n\n    constructor(private elRef: ElementRef) {\n        this.datas = [\n            {\n                'firstName': 'Mark',\n                'lastName': 'Otto',\n                'userName': '@mdo'\n            },\n            {\n                'firstName': 'Jacob',\n                'lastName': 'Thornton',\n                'userName': '@fat'\n            },\n            {\n                'firstName': 'Larry',\n                'lastName': 'the Bird',\n                'userName': '@twitter'\n            }\n        ];\n\n        this.printCSS = ['http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'];\n\n        this.printStyle =\n            `\n            th, td {\n                color: blue !important;\n            }\n            `;\n    }\n\n    printComplete() {\n        console.log('打印完成！');\n        this.showHead = true;\n        this.hideTable1 = false;\n    }\n\n    customPrint(print: string) {\n        this.showHead = false;\n        this.hideTable1 = true;\n        const printHTML: any = this.elRef.nativeElement.childNodes[0];\n        if (print === 'print1') {\n            this.printComponent1.print(printHTML);\n        } else if (print === 'print2') {\n            this.printComponent2.print();\n        }\n    }\n\t```\n\n## API\n\n### Inputs\n\n- `mode`（`?string='iframe'`） - 打印模式。可选的值：`iframe`，`popup`\n\n- `standard`（`?string='html5'`） - 弹出窗口的网页文档标准，只适用于`mode = 'popup'`。可选的值：`strict`（严格模式），`loose`（兼容模式），`html5`（HTML5）\n\n- `popTitle`（`?string='打印窗口'`） - 弹出窗口的标题，只适用于`mode = 'popup'`\n\n- `showBtn`（`?boolean=true`） - 如果为`true`将显示打印按钮\n\n- `btnText`（`?string='打印'`） - 打印按钮显示的文本\n\n- `btnClass`（`?Object={\"print-btn\": true,\"print-btn-success\": true};`） - 打印按钮class，传值与`[ngClass]`一样\n\n- `printHTML`（`string | HTMLElement`） - 打印的内容（支持字符串和HTML元素对象）\n\n- `printStyle`（`?string`） - 打印内容style。将写进打印页面的style标签中\n\n- `printCSS`（`?string[]`） - 打印内容css文件路径。将在打印页面生成link标签，支持绝对路径或相对路径（**使用相对路径时请注意/和./以及../的区别**）\n\n### Outputs\n\n- `printComplete` - 打印完成事件（无论是确定打印还是取消打印均会触发，这是因为浏览器的限制，无法监听到浏览器打印界面上的打印或者取消事件）\n\n### Instance Method\n\n- `print(printHTML?：string | HTMLElement): void` - 开始打印内容\n\n## Develop\n\n\t```shell\n\tnpm install // 安装依赖包\n\t\n\tnpm start // 启动项目\n\t```\n\n# License\n\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaixiangran%2Fe-ngx-print","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaixiangran%2Fe-ngx-print","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaixiangran%2Fe-ngx-print/lists"}