1.首先下載安裝包

npm install vue-print-nb --save

2.在main.js中引用

import Print from 'vue-print-nb'

Vue.use(Print); //註冊

3.最簡單使用方法

<div id="printTest" >
　<p>哈哈哈</p>
</div>
　<button v-print="'#printTest'">列印</button>

4.進階1，如果要列印的div在頁面上是有滾動條的，需要將列印內容再包裹一層

如下，最外層div超出時會有滾動條，如果直接將最外層div，設定id=printTest,只會列印頁面顯示部分，隱藏部分不會列印

<div class='test'>
  <div id="printTest" >
　  <p>哈哈哈</p>
  </div>
</div>
<button v-print="'#printTest'">列印</button>

<style>
.test{
 height:100px;
 width:100px;
 overflow:auto
}
</style>

5.進階2，如果要列印頁面隱藏部分，則將要列印的部分包一層div，樣式設定display:none即可　

<div class='test'>
  <div id="printTest" >
　  <p>哈哈哈</p>
  </div>
</div>
<button v-print="'#printTest'">列印</button>

<style>
.test{
 display:none
}
</style>

6.進階3，列印多頁內容

<div  id="printTest">
  <div class='test'>
　  <p>哈哈哈</p>
  </div>
  <div class='test'>
　  <p>嘿嘿嘿</p>
  </div>

  <div class='test'>
　  <p>嘻嘻嘻</p>
  </div>
</div>
<button v-print="'#printTest'">列印</button>

<style>
.test{
 page-break-before: auto;
  page-break-after: always;
}
</style>