vue實現(xiàn)打印功能的兩種方法
更新時間：2018年09月07日 14:06:36 作者：peiyongwei
這篇文章主要介紹了vue實現(xiàn)打印功能的兩種方法,文中通過兩種方法給大家介紹了指定不打印區(qū)域的解決方法，需要的朋友可以參考下
第一種方法：通過npm 安裝插件
1，安裝 npm install vue-print-nb --save
2，引入 安裝好以后在main.js文件中引入
import Print from 'vue-print-nb' Vue.use(Print); //注冊
3，現(xiàn)在就可以使用了
<div id="printTest" > <p>鋤禾日當(dāng)午</p> <p>汗滴禾下土 </p> <p>誰知盤中餐</p> <p>粒粒皆辛苦</p> </div> <button v-print="'#printTest'">打印</button>
如果內(nèi)容打印不全，在打印操作時點擊更多設(shè)置，然后設(shè)置縮放
第二種方法：手動下載插件到本地
插件地址：https://github.com/xyl66/vuePlugs_printjs
在src下新建文件夾plugs,將下載好的print.js放入plugs文件夾下，然后操作如下
import Print from '@/plugs/print' Vue.use(Print) // 注冊 <template> <section ref="print"> 打印內(nèi)容 <div class="no-print">不要打印我</div> </section> </template> this.$print(this.$refs.print) // 使用
注意事項 需使用ref獲取dom節(jié)點，若直接通過id或class獲取則webpack打包部署后打印內(nèi)容為空
指定不打印區(qū)域
方法1. 添加no-print樣式類
<div class="no-print">不要打印我</div>
方法2. 自定義類名
<div class="do-not-print-me-xxx">不要打印我</div>
this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用
提示，github上有一個錯誤如下，避免踩坑，($ref 會報錯，print undefind ; 改為 $refs 就好了)
總結(jié)
以上所述是小編給大家介紹的vue實現(xiàn)打印功能的兩種方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue如何實現(xiàn)響應(yīng)式系統(tǒng)
這篇文章給大家整理了關(guān)于Vue如何實現(xiàn)響應(yīng)式系統(tǒng)的相關(guān)知識點內(nèi)容，有興趣的朋友可以參考學(xué)習(xí)下。2018-07-07
對應(yīng)前端小白來說,一看到:deep()這些模式的用法就不理解是啥意思,下面簡單介紹一下:deep()是什么以及如何使用,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了WebSocket使用以及在vue如何使用問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue創(chuàng)建全局變量和方法有很多種,下面這篇文章主要給大家介紹了關(guān)于Vue3定義全局變量的方式,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價值,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了Vue實現(xiàn)base64編碼圖片間的切換功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了Vue配置文件vue.config.js配置前端代理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue-quill-editor的使用及個性化定制操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue.js中的refs屬性是一個非常有用的特性,它允許我們在組件中操作 DOM 元素和組件實例,本文來介紹一下Vue寶典之this.$refs屬性的使用,感興趣的可以了解一下2023-12-12
vue雙擊事件2.0事件監(jiān)聽(點擊-雙擊-鼠標(biāo)事件)和事件修飾符操作
這篇文章主要介紹了vue雙擊事件2.0事件監(jiān)聽(點擊-雙擊-鼠標(biāo)事件)和事件修飾符操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue+node+socket io實現(xiàn)多人互動并發(fā)布上線全流程
這篇文章主要介紹了vue+node+socket io實現(xiàn)多人互動并發(fā)布上線全流程,本文給大家提到了socket.io相關(guān)用法概覽及開發(fā)流程，需要的朋友可以參考下2021-09-09