Vue利用插件實(shí)現(xiàn)打印功能的示例詳解

更新時(shí)間：2023年03月16日 10:46:21 作者：會(huì)說(shuō)法語(yǔ)的豬

這篇文章主要為大家詳細(xì)介紹了Vue如何利用vue-print-nb插件實(shí)現(xiàn)打印功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)一下

安裝

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
      }
    }
  }
}

寫的有點(diǎn)兒倉(cāng)促，基本使用應(yīng)該夠用了，碰到復(fù)雜的需求或者其他的到時(shí)候再研究，先記錄一下。

到此這篇關(guān)于Vue利用插件實(shí)現(xiàn)打印功能的示例詳解的文章就介紹到這了,更多相關(guān)Vue打印內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue
打印

相關(guān)文章

Vue實(shí)現(xiàn)動(dòng)態(tài)響應(yīng)數(shù)據(jù)變化
本篇文章主要介紹了Vue 動(dòng)態(tài)響應(yīng)數(shù)據(jù)變化，通過(guò)綁定數(shù)據(jù)即可以實(shí)時(shí)改變視圖顯示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-04-04
Vue兩個(gè)通信方式與動(dòng)畫(huà)過(guò)度及混入使用介紹
最近在寫vue的一個(gè)項(xiàng)目要實(shí)現(xiàn)過(guò)渡的效果,雖然vue動(dòng)畫(huà)不是強(qiáng)項(xiàng),庫(kù)也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)效果的相關(guān)資料,需要的朋友可以參考下
2023-03-03
用element的upload組件實(shí)現(xiàn)多圖片上傳和壓縮的示例代碼
這篇文章主要介紹了用element的upload組件實(shí)現(xiàn)多圖片上傳和壓縮的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
vue項(xiàng)目中使用eslint+prettier規(guī)范與檢查代碼的方法
這篇文章主要介紹了vue項(xiàng)目中使用eslint+prettier規(guī)范與檢查代碼的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
vue后臺(tái)管理添加多語(yǔ)言功能的實(shí)現(xiàn)示例
這篇文章主要介紹了vue后臺(tái)管理添加多語(yǔ)言功能的實(shí)現(xiàn)示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-04-04
詳解vue-Resource（與后端數(shù)據(jù)交互）
本篇文章主要介紹了vue-Resource（與后端數(shù)據(jù)交互），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-01-01
vue前端如何向后端傳遞參數(shù)
這篇文章主要介紹了vue前端如何向后端傳遞參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue2 Vue-cli中使用Typescript的配置詳解
Vue作為前端三大框架之一截至到目前在github上以收獲44,873顆星，足以說(shuō)明其以悄然成為主流。下面這篇文章主要給大家介紹了關(guān)于Vue2 Vue-cli中使用Typescript的配置的相關(guān)資料，需要的朋友可以參考下。
2017-07-07
解決removeEventListener 無(wú)法清除監(jiān)聽(tīng)的問(wèn)題
這篇文章主要介紹了解決removeEventListener 無(wú)法清除監(jiān)聽(tīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10
詳解vue3中虛擬列表組件的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了vue3中實(shí)現(xiàn)虛擬列表組件的相關(guān)知識(shí),包含加載更多以及l(fā)oading狀態(tài),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下
2023-10-10