Vue利用插件實(shí)現(xiàn)打印功能的示例詳解
這里介紹一個(gè)插件（vue-print-nb），蠻好用的，用起來(lái)很方便，所以想記錄一下
npm官方： https://www.npmjs.com/package/vue-print-nb
安裝
V2版本
npm install vue-print-nb --save
V3版本
npm install vue3-print-nb --save
引入
V2版本
main.js
import Print from 'vue-print-nb'
// Global instruction
Vue.use(Print);
//or
// Local instruction
import print from 'vue-print-nb'
directives: {
print
}
V3版本
main.js
// Global instruction
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')
//or
// Local instruction
import print from 'vue3-print-nb'
directives: {
print
}使用
目前我使用的是Vue2，所以以V2為例介紹。vue3和vue2使用基本是一樣的。
1. 打印整個(gè)頁(yè)面：
只需要添加 v-print 指令即可
<button v-print>Print the entire page</button>
2. 打印某個(gè)范圍：
我們要給打印的一個(gè)區(qū)域一個(gè)id，然后在 v-print 指令指定該id即可
<button v-print="'#print-content'">打印</button> <div id="print-content"> <p>葫蘆娃，葫蘆娃</p> <p>一根藤上七朵花 </p> <p>小小樹(shù)藤是我家 啦啦啦啦 </p> <p>叮當(dāng)當(dāng)咚咚當(dāng)當(dāng) 澆不大</p> <p> 叮當(dāng)當(dāng)咚咚當(dāng)當(dāng) 是我家</p> <p> 啦啦啦啦</p> <p>...</p> </div>
3. 也可以給 v-print 指令設(shè)置對(duì)應(yīng)的各個(gè)配置：
<template>
<div class="main">
<button v-print="printObj" @click="print">打印</button>
<div id="print-content">
<p>葫蘆娃，葫蘆娃</p>
<p>一根藤上七朵花 </p>
<p>小小樹(shù)藤是我家 啦啦啦啦 </p>
<p>叮當(dāng)當(dāng)咚咚當(dāng)當(dāng) 澆不大</p>
<p> 叮當(dāng)當(dāng)咚咚當(dāng)當(dāng) 是我家</p>
<p> 啦啦啦啦</p>
<p>...</p>
</div>
<h2>哈哈哈哈哈哈</h2>
</div>
</template>
<script>
export default {
data() {
return {
printObj: {
id: 'print-content',
popTitle: 'good print', // 如果不設(shè)置 默認(rèn)是沒(méi)有值即 undifined
}
}
}
}寫(xiě)的有點(diǎn)兒倉(cāng)促，基本使用應(yīng)該夠用了，碰到復(fù)雜的需求或者其他的到時(shí)候再研究，先記錄一下。
到此這篇關(guān)于Vue利用插件實(shí)現(xiàn)打印功能的示例詳解的文章就介紹到這了,更多相關(guān)Vue打印內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文詳細(xì)介紹了使用uni-app進(jìn)行項(xiàng)目開(kāi)發(fā)的全過(guò)程,包括uni-app框架的介紹、開(kāi)發(fā)工具HBuilderX的下載安裝與配置、項(xiàng)目開(kāi)發(fā)中的網(wǎng)絡(luò)請(qǐng)求配置、小程序分包加載、自定義組件使用、組件使用技巧等,還提及了解決開(kāi)發(fā)中遇到的一些問(wèn)題,需要的朋友可以參考下2024-11-11
vue中的provide/inject的學(xué)習(xí)使用
本篇文章主要介紹了vue中的provide/inject的學(xué)習(xí)使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
用VueJS寫(xiě)一個(gè)Chrome瀏覽器插件的實(shí)現(xiàn)方法
這篇文章主要介紹了用VueJS寫(xiě)一個(gè)Chrome瀏覽器插件的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
這篇文章主要給大家介紹了關(guān)于vue3中defineEmits使用的相關(guān)資料,在Vue3中可以使用defineEmits函數(shù)來(lái)定義組件的自定義事件,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
vue踩坑記錄之echarts動(dòng)態(tài)數(shù)據(jù)刷新問(wèn)題
這篇文章主要介紹了vue踩坑記錄之echarts動(dòng)態(tài)數(shù)據(jù)刷新問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
詳解vuex中的this.$store.dispatch方法
這篇文章主要介紹了vuex中的this.$store.dispatch方法,必須要用commit(‘SET_TOKEN’,?tokenV)調(diào)用mutations里的方法，才能在store存儲(chǔ)成功，需要的朋友可以參考下2022-11-11
在Vue中進(jìn)行數(shù)據(jù)分頁(yè)的實(shí)現(xiàn)方法
在前端開(kāi)發(fā)中,數(shù)據(jù)分頁(yè)是一個(gè)常見(jiàn)的需求,特別是當(dāng)處理大量數(shù)據(jù)時(shí),Vue作為一款流行的JavaScript框架,提供了強(qiáng)大的工具和生態(tài)系統(tǒng)來(lái)實(shí)現(xiàn)數(shù)據(jù)分頁(yè),本文將介紹如何在Vue中進(jìn)行數(shù)據(jù)分頁(yè),以及如何設(shè)計(jì)一個(gè)通用的分頁(yè)組件,需要的朋友可以參考下2023-10-10
基于VUE實(shí)現(xiàn)的九宮格抽獎(jiǎng)功能
這篇文章主要介紹了基于VUE實(shí)現(xiàn)的九宮格抽獎(jiǎng)功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
使vue實(shí)現(xiàn)jQuery調(diào)用的兩種方法
這篇文章主要介紹了使vue實(shí)現(xiàn)jQuery調(diào)用的兩種方法 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
element-plus中el-upload組件限制上傳文件類型的方法
?Element Plus 中,el-upload 組件可以通過(guò)設(shè)置 accept 屬性來(lái)限制上傳文件的格式,這篇文章主要介紹了element-plus中el-upload組件限制上傳文件類型,需要的朋友可以參考下2024-02-02