Vue結合vue-print-nb實現打印功能

安裝

npm install vue-print-nb --save

main.js中全局引入

import Print from 'vue-print-nb'
Vue.use(Print);

頁面中使用

3.1 使用ref
      <div id="printMe" >
          <p>打印內容</p>
      </div>
      <button v-print="'#printMer'">打印</button> 

3.2使用id
    <div ref="print">
        <p>打印內容</p>
        <p class="no-print">非打印內容 方法1：添加no-print樣式類</p>
        <p class="className">非打印內容 方法2：自定義類名</p>
    </div>
    <button @click="print()">打印</button>

   print(){
    this.$print(this.$refs.print,{'no-print':'.className'});
   }

3.3使用printObj
   <button v-print="printObj">Print local range</button>
 
  <div id="printMe" style="background:red;">
        <p>葫蘆娃，葫蘆娃</p>
        <p>一根藤上七朵花 </p>
  </div>

  export default {
    data() {
        return {
            printObj: {
              id: "printMe",
              popTitle: 'good print',
              extraCss: 'https://www.google.com,https://www.google.com',
              extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
            }
        };
    }
  } 

eg:

效果

更多參考

https://www.jianshu.com/p/5b2ffd6134cc