项目作者: laixiangran

项目描述 :
基于Angular的打印组件,可打印HTML和文本
高级语言: TypeScript
项目地址: git://github.com/laixiangran/e-ngx-print.git
创建时间: 2017-04-17T15:23:12Z
项目社区:https://github.com/laixiangran/e-ngx-print

开源协议:MIT License

关键词:
angular print

下载


e-ngx-print

基于Angular的打印组件,可打印HTML和文本。

Usage

  1. Install

    1. npm install --save e-ngx-print@latest
  2. Add the ENgxPrintModule

    1. import {ENgxPrintModule} from "e-ngx-print";
    2. @NgModule({
    3. imports: [
    4. ENgxPrintModule
    5. ]
    6. })
  3. Use in Template

    1. <div id="print_div" #print_div>
    2. <table class="table table-striped">
    3. <thead *ngIf="showHead">
    4. <tr>
    5. <th>#</th>
    6. <th id="th_green">First Name</th>
    7. <th>Last Name</th>
    8. <th>Username</th>
    9. </tr>
    10. </thead>
    11. <tbody>
    12. <tr *ngFor="let user of datas; let i = index">
    13. <td class="td_blue">{{i}}</td>
    14. <td>{{user?.firstName}}</td>
    15. <td>{{user?.lastName}}</td>
    16. <td>{{user?.userName}}</td>
    17. </tr>
    18. </tbody>
    19. </table>
    20. <table *ngIf="hideTable1" id="table1" class="table table-striped">
    21. <thead>
    22. <tr>
    23. <th>#</th>
    24. <th>First Name</th>
    25. <th>Last Name</th>
    26. <th>Username</th>
    27. </tr>
    28. </thead>
    29. <tbody>
    30. <tr *ngFor="let user of datas; let i = index">
    31. <td>{{i}}</td>
    32. <td>{{user?.firstName}}</td>
    33. <td>{{user?.lastName}}</td>
    34. <td>{{user?.userName}}</td>
    35. </tr>
    36. </tbody>
    37. </table>
    38. </div>
    39. <h2>两种打印模式(iframe and popup)- 打印指定html</h2>
    40. <div>
    41. <e-ngx-print
    42. [btnText]="'iframe模式'"
    43. [btnClass]="{'btn': true, 'btn-success': true}"
    44. [printHTML]="print_div"
    45. [printStyle]="printStyle"
    46. [printCSS]="printCSS"
    47. (printComplete)="printComplete()">
    48. </e-ngx-print>
    49. </div>
    50. <div>
    51. <e-ngx-print
    52. [mode]="'popup'"
    53. [popTitle]="'表格打印'"
    54. [btnText]="'popup模式'"
    55. [btnClass]="{'btn': true, 'btn-warning': true}"
    56. [printHTML]="print_div"
    57. [printStyle]="printStyle"
    58. [printCSS]="printCSS"
    59. (printComplete)="printComplete()">
    60. </e-ngx-print>
    61. </div>
    62. <h2>打印指定字符串</h2>
    63. <div>
    64. <e-ngx-print
    65. [btnText]="'iframe模式'"
    66. [btnClass]="{'btn': true, 'btn-success': true}"
    67. [printHTML]="editorText"
    68. (printComplete)="printComplete()">
    69. </e-ngx-print>
    70. </div>
    71. <div>
    72. <e-ngx-print
    73. [mode]="'popup'"
    74. [popTitle]="'表格打印'"
    75. [btnText]="'popup模式'"
    76. [btnClass]="{'btn': true, 'btn-warning': true}"
    77. [printHTML]="editorText"
    78. (printComplete)="printComplete()">
    79. </e-ngx-print>
    80. </div>
    81. <h2>自定义打印(将隐藏的html显示并打印)</h2>
    82. <div>
    83. <e-ngx-print #print1
    84. [showBtn]="false"
    85. [printStyle]="printStyle"
    86. [printCSS]="printCSS"
    87. (printComplete)="printComplete()">
    88. </e-ngx-print>
    89. <button class="btn btn-success" (click)="customPrint('print1')">iframe模式</button>
    90. </div>
    91. <div>
    92. <e-ngx-print #print2
    93. [mode]="'popup'"
    94. [popTitle]="'表格打印'"
    95. [showBtn]="false"
    96. [printHTML]="print_div"
    97. [printStyle]="printStyle"
    98. [printCSS]="printCSS"
    99. (printComplete)="printComplete()">
    100. </e-ngx-print>
    101. <button class="btn btn-warning" (click)="customPrint('print2')">popup模式</button>
    102. </div>
  4. Use in Component

    1. @ViewChild('print1') printComponent1: ENgxPrintComponent;
    2. @ViewChild('print2') printComponent2: ENgxPrintComponent;
    3. showHead: boolean = true;
    4. hideTable1: boolean = false;
    5. datas: any[];
    6. printCSS: string[];
    7. printStyle: string;
    8. editorText = '<p style="text-align:center;line-height:150%"><strong><span style="font-family: 宋体;line-height: 150%;font-size: 21px"><span style="font-family:宋体">关于</span>××××工程项目划分的请示(函)</span></strong><span style="font-family: 宋体; font-size: 21px; text-indent: 315px;"> </span></p><p style="line-height:150%"><strong><span style="font-family: 宋体;line-height: 150%;font-size: 16px">海淀区水利工程质量监督站:</span></strong></p><p style="text-indent:38px;line-height:150%"><span style=";font-family:宋体;line-height:150%;font-size:16px">××××工程,依据××××文件开始建设。(简述工程概况和主要工程量)。</span></p><p style="text-indent:38px;line-height:150%"><span style=";font-family:宋体;line-height:150%;font-size:16px"><span style="font-family:宋体">根据《水利水电工程施工质量检验与评定规程》</span>SL176-2007)、《水利水电基本建设工程单元工程质量评定标准》(SDJ249-88)及《北京市水利工程施工质量评定标准》等有关规定,结合本工程的实际情况,经研究确认本工程项目共划分为××个单位工程,××个分部工程,××个单元工程。其中主要单位工程××个,分别为 ;主要分部工程××个,分别为 ;重要隐蔽单元工程××个,分别为 ;关键部位单元工程××个,分别为 。具体划分见附表。</span></p><p style="text-indent:38px;line-height:150%"><span style=";font-family:宋体;line-height:150%;font-size:16px"> </span></p><p style="text-indent:38px;line-height:150%"><span style=";font-family:宋体;line-height:150%;font-size:16px"><span style="font-family:宋体">附表:</span>××××工程项目划分表</span></p><p style="text-indent:38px;line-height:150%"><span style=";font-family:宋体;line-height:150%;font-size:16px"> </span></p><p style="text-indent:38px;line-height:150%"><span style=";font-family:宋体;line-height:150%;font-size:16px"> </span></p><p style="text-indent: 406px; line-height: 150%; text-align: right;"><span style=";font-family:宋体;line-height:150%;font-size:16px">××××××(单位)</span></p><p style="text-indent: 398px; line-height: 150%; text-align: right;"><span style=";font-family:宋体;line-height:150%;font-size:16px">××××年××月××日</span></p>';
    9. constructor(private elRef: ElementRef) {
    10. this.datas = [
    11. {
    12. 'firstName': 'Mark',
    13. 'lastName': 'Otto',
    14. 'userName': '@mdo'
    15. },
    16. {
    17. 'firstName': 'Jacob',
    18. 'lastName': 'Thornton',
    19. 'userName': '@fat'
    20. },
    21. {
    22. 'firstName': 'Larry',
    23. 'lastName': 'the Bird',
    24. 'userName': '@twitter'
    25. }
    26. ];
    27. this.printCSS = ['http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css'];
    28. this.printStyle =
    29. `
    30. th, td {
    31. color: blue !important;
    32. }
    33. `;
    34. }
    35. printComplete() {
    36. console.log('打印完成!');
    37. this.showHead = true;
    38. this.hideTable1 = false;
    39. }
    40. customPrint(print: string) {
    41. this.showHead = false;
    42. this.hideTable1 = true;
    43. const printHTML: any = this.elRef.nativeElement.childNodes[0];
    44. if (print === 'print1') {
    45. this.printComponent1.print(printHTML);
    46. } else if (print === 'print2') {
    47. this.printComponent2.print();
    48. }
    49. }

API

Inputs

  • mode?string='iframe') - 打印模式。可选的值:iframepopup

  • standard?string='html5') - 弹出窗口的网页文档标准,只适用于mode = 'popup'。可选的值:strict(严格模式),loose(兼容模式),html5(HTML5)

  • popTitle?string='打印窗口') - 弹出窗口的标题,只适用于mode = 'popup'

  • showBtn?boolean=true) - 如果为true将显示打印按钮

  • btnText?string='打印') - 打印按钮显示的文本

  • btnClass?Object={"print-btn": true,"print-btn-success": true};) - 打印按钮class,传值与[ngClass]一样

  • printHTMLstring | HTMLElement) - 打印的内容(支持字符串和HTML元素对象)

  • printStyle?string) - 打印内容style。将写进打印页面的style标签中

  • printCSS?string[]) - 打印内容css文件路径。将在打印页面生成link标签,支持绝对路径或相对路径(使用相对路径时请注意/和./以及../的区别

Outputs

  • printComplete - 打印完成事件(无论是确定打印还是取消打印均会触发,这是因为浏览器的限制,无法监听到浏览器打印界面上的打印或者取消事件)

Instance Method

  • print(printHTML?:string | HTMLElement): void - 开始打印内容

Develop

  1. ```shell
  2. npm install // 安装依赖包
  3. npm start // 启动项目
  4. ```

License

MIT License