vue3使用vue3-print-nb實現區域打印功能

目錄 場景 一.安裝vue3-print-nb 二.在main.ts中引入 三.HTML 四.參數配置 附：分頁打印示例代碼 總結 場景 大多數后臺系統中都存在打印的需求，在有打印需求時，對前端來說當然是直接打印

目錄

• 場景
• 一.安裝vue3-print-nb
• 二.在main.ts中引入
• 三.HTML
• 四.參數配置
• 附：分頁打印示例代碼
• 總結

場景

大多數后臺系統中都存在打印的需求，在有打印需求時，對前端來說當然是直接打印頁面更容易，那么本篇文章就是在vue3中，使用vue3-print-nb插件來區域打印，實現指哪打哪！

一.安裝vue3-print-nb

npm install vue3-print-nb

二.在main.ts中引入

//引入
import print from 'vue3-print-nb'
//掛載
const app = createApp(App)
app.use(print)

三.HTML

<!-- 打印區域容器 -->
<div id="printBox">
<span>我就是被打印的內容</span>
<span>在#printBox 容器里的內容都會被打印噢</span>
</div>
<!-- 按鈕綁定打印 -->
<button v-print="print">點擊打開打印預覽</button>

四.參數配置

//這里是打印的配置項
const  print=ref({
        id: 'printBox',//這里的id就是上面我們的打印區域id，實現指哪打哪
        popTitle: '配置頁眉標題', // 打印配置頁上方的標題
        extraHead: '', // 最上方的頭部文字，附加在head標簽上的額外標簽，使用逗號分割
        preview: false, // 是否啟動預覽模式，默認是false
        previewTitle: '預覽的標題', // 打印預覽的標題
        previewPrintBtnLabel: '預覽結束，開始打印', // 打印預覽的標題下方的按鈕文本，點擊可進入打印
        zIndex: 20002, // 預覽窗口的z-index，默認是20002，最好比默認值更高
        previewBeforeOpenCallback() { console.log('正在加載預覽窗口！'); }, // 預覽窗口打開之前的callback
        previewOpenCallback() { console.log('已經加載完預覽窗口，預覽打開了！') }, // 預覽窗口打開時的callback
        beforeOpenCallback() { console.log('開始打印之前！') }, // 開始打印之前的callback
        openCallback() { console.log('執行打印了！') }, // 調用打印時的callback
        closeCallback() { console.log('關閉了打印工具！') }, // 關閉打印的callback(無法區分確認or取消)
        clickMounted() { console.log('點擊v-print綁定的按鈕了！') },
      })

附：分頁打印示例代碼

<template>
    <div>
        <button v-print="'#a'">打印</button>
        <div id="a">
             // 方法一
             // 使用div包裹需要分頁的塊 使用 css屬性 page-break-after:always進行分頁
            <div style="page-break-after:always">第一頁</div>
            <div style="page-break-after:always">第二頁</div>
        </div>
    </div>
</template>
<style>
     // 方法二
     // 使用媒體查詢 在打印時設置 body 和 html 的高度為auto
     @media print {
        @page {
          size:  auto;
        }
        body, html {   //如果vue最外層id，默認是#app。如果設置了height:100%;，那么#app也加
          height: auto !important;
        }
      }
</style>

總結

到此這篇關于vue3使用vue3-print-nb實現區域打印功能的文章就介紹到這了,更多相關vue3實現區域打印內容請搜索技圈網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持技圈網！

【轉自：美國高防服務器 http://www.558idc.com/usa.html轉載請說明出處】