目錄場(chǎng)景一.安裝vue3-print-nb二.在main.ts中引入三.HTML四.參數(shù)配置附：分頁(yè)打印示例代碼總結(jié)場(chǎng)景

大多數(shù)后臺(tái)系統(tǒng)中都存在打印的需求，在有打印需求時(shí)，對(duì)前端來(lái)說(shuō)當(dāng)然是直接打印頁(yè)面更容易，那么本篇文章就是在vue3中，使用vue3-print-nb插件來(lái)區(qū)域打印，實(shí)現(xiàn)指哪打哪！

一.安裝vue3-print-nbnpm install vue3-print-nb二.在main.ts中引入//引入import print from 'vue3-print-nb'//掛載const app = createApp(App)app.use(print)三.HTML<!-- 打印區(qū)域容器 --><div id='printBox'><span>我就是被打印的內(nèi)容</span><span>在#printBox 容器里的內(nèi)容都會(huì)被打印噢</span></div><!-- 按鈕綁定打印 --><button v-print='print'>點(diǎn)擊打開打印預(yù)覽</button>四.參數(shù)配置//這里是打印的配置項(xiàng)const print=ref({id: 'printBox',//這里的id就是上面我們的打印區(qū)域id，實(shí)現(xiàn)指哪打哪popTitle: '配置頁(yè)眉標(biāo)題', // 打印配置頁(yè)上方的標(biāo)題extraHead: '', // 最上方的頭部文字，附加在head標(biāo)簽上的額外標(biāo)簽，使用逗號(hào)分割preview: false, // 是否啟動(dòng)預(yù)覽模式，默認(rèn)是falsepreviewTitle: '預(yù)覽的標(biāo)題', // 打印預(yù)覽的標(biāo)題previewPrintBtnLabel: '預(yù)覽結(jié)束，開始打印', // 打印預(yù)覽的標(biāo)題下方的按鈕文本，點(diǎn)擊可進(jìn)入打印zIndex: 20002, // 預(yù)覽窗口的z-index，默認(rèn)是20002，最好比默認(rèn)值更高previewBeforeOpenCallback() { console.log('正在加載預(yù)覽窗口！'); }, // 預(yù)覽窗口打開之前的callbackpreviewOpenCallback() { console.log('已經(jīng)加載完預(yù)覽窗口，預(yù)覽打開了！') }, // 預(yù)覽窗口打開時(shí)的callbackbeforeOpenCallback() { console.log('開始打印之前！') }, // 開始打印之前的callbackopenCallback() { console.log('執(zhí)行打印了！') }, // 調(diào)用打印時(shí)的callbackcloseCallback() { console.log('關(guān)閉了打印工具！') }, // 關(guān)閉打印的callback(無(wú)法區(qū)分確認(rèn)or取消)clickMounted() { console.log('點(diǎn)擊v-print綁定的按鈕了！') }, })附：分頁(yè)打印示例代碼<template> <div><button v-print=''#a''>打印</button><div id='a'> // 方法一 // 使用div包裹需要分頁(yè)的塊 使用 css屬性 page-break-after:always進(jìn)行分頁(yè) <div style='page-break-after:always'>第一頁(yè)</div> <div style='page-break-after:always'>第二頁(yè)</div></div> </div></template><style> // 方法二 // 使用媒體查詢 在打印時(shí)設(shè)置 body 和 html 的高度為auto @media print {@page { size: auto;}body, html { //如果vue最外層id，默認(rèn)是#app。如果設(shè)置了height:100%;，那么#app也加 height: auto !important;} }</style>總結(jié)

到此這篇關(guān)于vue3使用vue3-print-nb實(shí)現(xiàn)區(qū)域打印功能的文章就介紹到這了,更多相關(guān)vue3實(shí)現(xiàn)區(qū)域打印內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！