vue實作列印功能的兩種方法(附代碼)

這篇文章帶給大家的內容是關於vue實作列印功能的兩種方法(附程式碼)，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

第一種方法：透過npm 安裝外掛程式

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>
　　　　　　<p>清风来于江上 </p>
　　　　</div>
　　　　<button v-print="&#39;#printTest&#39;">打印</button>

4.如需透過連結位址列印：window.location.href = airway_bill;  airway_bill為連結位址。

5.如果內容列印不全，在列印操作時點擊更多設置，然後設定縮放。

第二種方法：手動下載外掛程式到本機

##外掛程式位址：https://github.com/xyl66/vuePlugs_printjs

1.在src下新資料夾plugs,將下載好的print.js放入plugs資料夾下，然後操作如下

import Print from '@/plugs/print'
Vue.use(Print) // 注册
<template>
　　<section ref="print">
　　　　打印内容
　　　　<div class="no-print">不要打印我</div>
　　</section>
</template>
this.$print(this.$refs.print) // 使用

2.注意事項需使用ref取得dom節點，若直接透過id或class取得則webpack打包部署後列印內容為空白 

3.指定不列印區域

 方法1. 新增no-print樣式類別

<div class="no-print">不要打印我</div>

方法2. 自訂類別名稱

<div class="do-not-print-me-xxx">不要打印我</div>
this.$print(this.$refs.print,{&#39;no-print&#39;:&#39;.do-not-print-me-xxx&#39;}) // 使用

這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的

JavaScript教程視頻欄目！

以上是vue實作列印功能的兩種方法(附代碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章！