essence-ng2-print
essence-ng2-print is an Angular component that can print html and text.
Usage
-
Install
npm install --save essence-ng2-print@latest -
Set in the .angular-cli.json(@angular/cli)
"styles": -
Add the EssenceNg2PrintModule
; -
Use in Template
#First NameLast NameUsername{{i}}{{user?.firstName}}{{user?.lastName}}{{user?.userName}}#First NameLast NameUsername{{i}}{{user?.firstName}}{{user?.lastName}}{{user?.userName}}自定义打印(iframe模式)自定义打印(popup模式) -
Use in Component
printComponent1: EssenceNg2PrintComponent;printComponent2: EssenceNg2PrintComponent;printDiv: any;showHead: boolean = true;hideTable1: boolean = false;datas: any;printCSS: string;printStyle: string;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>';constructor private elRef: ElementRefgetPrintDivprintCompletecustomPrint print: string
API
Inputs
-
mode
(?string='iframe'
) - 打印模式。可选的值:iframe
,popup
-
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]
一样 -
printHTML
(string|HTMLElement
) - 打印的内容 -
printStyle
(?string
) - 打印内容style。将写进打印页面的style标签中 -
printCSS
(?Array<string>
) - 打印内容css文件路径。将在打印页面生成link标签,支持绝对/相对路径(相对于当前路由地址),建议用绝对路径
Outputs
printComplete
- 打印完成的事件
Instance Method
print
- 开始打印内容
Develop
```shell
npm install // 安装依赖包
npm start // 启动项目
```