vue打印功能

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>