angular打印

在本週的項目中遇到一個需求，打印頁面的某些內容，本覺得是個很簡單的需求，畢竟瀏覽器自帶的就有打印功能，那不就成了調用一個函數的事情了嗎？

沒那麼簡單

在開始向邢彥年學長明確需求的時候，邢彥年學長熱心的提供了一個angular的插件—— essence-ng2-print，看了看使用方法確實簡單，並且好像也是符合個人需求的，但次日用的時候，才發現僅僅是好像而已，該插件在打印原生html項目時效果仍是很好的

可是在打印須要本地css的項目時，卻失去了樣式，並且引入本地css也沒效果

好像也能看，就是醜了點，以後嘗試本身寫方法調用print函數，但也是同樣的沒有css，並且本身還不知道在這裏該如何引入。

以後，去github搜索一下了這個插件，原本是想去找找有沒有人提issue，沒想到發現這個已經有了新版本，並且改動很大，當時還一陣竊喜，應該解決了用戶痛點的吧

可是並無……

更好的解決方案

以後在github上繼續尋找，總算找到一個基本符合要求的:ngx-print

使用方法

使用方法很簡單

1.安裝依賴

npm install ngx-print

2.在相應的NgModule中引入

import {NgxPrintModule} from '[ngx-print](https://github.com/selemxmn/ngx-print)';

@NgModule({
...
imports: [NgxPrintModule, ...],
...
})
export class YourAppModule {
}

3.設置打印按鈕和打印目標

<!--
 1)- 經過id找到打印的目標
 -->
<div id="print"> 
  打印內容
</div>

 <!--
 2)- 設置指令(ngxPrint)到按鈕上,
 3)- 設置 printSectionId爲目標id
 -->
<button printSectionId="print-section" ngxPrint>print</button>

基本的打印功能已經有了，這解決了咱們上面的問題了嗎？
並無，咱們還須要增長一個可選屬性，useExistingCss

<button printSectionId="print-section" ngxPrint [useExistingCss]="true">print</button>

效果讓人很滿意。

還有另外的幾個可選屬性，如有興趣，能夠去github查看。

這個插件就完美了嗎

並無，由於他提供的接口還不夠多，好比咱們可能須要在打印前作點什麼，或者在打印後作點什麼，而essence-ng2-print這一點上就作的很好，他提供了大量的屬性方法，讓用戶的自由的配置。
好像一個更好的開源插件的想法就造成了。參考現有的兩個項目的代碼，好像難度也不大，有機會的話，嘗試嘗試。