首頁 > web前端 > js教程 > 主體

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

不言
發布: 2019-03-20 11:36:18
轉載
8672 人瀏覽過

這篇文章帶給大家的內容是關於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 &#39;@/plugs/print&#39;
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中文網其他相關文章!

相關標籤:
vue
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!