Vue3前端做打印頁面信息實現(xiàn)打印功能(打印界面某個部分)

更新時間：2025年02月19日 11:14:17 作者：KT553

這篇文章主要介紹了如何使用vue3-print-nb依賴在Vue?3項目中實現(xiàn)頁面打印功能,提供了完整的代碼示例,大家可以根據項目需求選擇合適的打印方法,需要的朋友可以參考下

一、先看效果：

二、使用的依賴：

使用的是：vue3-print-nb；

版本號"vue3-print-nb": "^0.1.4",

npm install vue3-print-nb

三、注冊使用：

下好依賴后在項目里的 main.js 文件里面注冊使用一下

import print from 'vue3-print-nb'
app.use(print);

四、打印頁面代碼:

通過 v-print="printInfoObj" 自定義指令綁定打印的按鈕。

需要打印的區(qū)域通過使用 id="printInfo" 綁定。

完整代碼：

<template>
  <el-button type="primary" v-print="printInfoObj">打印</el-button>

  <!-- 需要打印的區(qū)域 -->
  <div class="print_info_box" id="printInfo">
    <div class="title_box">收貨人信息表</div>
    <div>
      <el-row class="public">
        <el-col :span="12">
          <span>收  貨  人：</span>
          <span>張三三</span>
        </el-col>
        <el-col :span="12">
          <span>下單日期：</span>
          <span>2024-12-05 14:32:55</span>
        </el-col>
      </el-row>
      <el-row class="public">
        <el-col :span="12">
          <span>收貨地址：</span>
          <span>北京市-朝陽區(qū)-188號</span>
        </el-col>
        <el-col :span="12">
          <span>訂單編號：</span>
          <span>8564795214986528</span>
        </el-col>
      </el-row>
    </div>
    <table border="1" cellspacing="0" width="100%" class="tableStyle">
      <tr height="60">
        <td>商品</td>
        <td colspan="2">規(guī)格</td>
        <td>合計</td>
      </tr>
      <tr height="50">
        <td>連衣裙</td>
        <td>白色*5</td>
        <td>粉色*15</td>
        <td>20</td>
      </tr>
      <tr height="50">
        <td>牛仔褲</td>
        <td>黑色*13</td>
        <td>藍色*19</td>
        <td>32</td>
      </tr>
      <tr height="50">
        <td>沖鋒衣</td>
        <td>黑色*3</td>
        <td>白色*1</td>
        <td>4</td>
      </tr>
      <tr height="50">
        <td colspan="3">總計</td>
        <td>56</td>
      </tr>
    </table>
    <div>
      <el-row class="public">
        <el-col :span="6">
          <span>調配人：</span>
          <span>________</span>
        </el-col>
        <el-col :span="6">
          <span>核對人：</span>
          <span>________</span>
        </el-col>
        <el-col :span="6">
          <span>對接人：</span>
          <span>________</span>
        </el-col>
        <el-col :span="6">
          <span>發(fā)貨人：</span>
          <span>________</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
// 打印區(qū)域配置對象
const printInfoObj = {
  id: "printInfo",
  popTitle: "收貨人信息表", // 打印頁面的頁眉
  preview: false,  // 是否開啟預覽
  beforeOpenCallback(vue) {
    // console.log('觸發(fā)打印工具打開前回調')
    vue.printLoading = true;
  },
  openCallback(vue) {
    // console.log('觸發(fā)打印工具打開的回調')
    vue.printLoading = false;
  },
  closeCallback() {
    // console.log('觸發(fā)關閉打印工具回調')
  },
  previewBeforeOpenCallback() {
    // console.log('觸發(fā)預覽前回調')
  },
  previewOpenCallback() {
    // console.log('觸發(fā)預覽的回調')
  },
};
</script>

<style lang="less" scoped>
// 去掉頁眉頁腳
// @page {
//   size: auto;
//   margin: 0mm;
// }

// 隱藏左下方頁腳URL鏈接
// @page {
//   size: A4(JIS);
//   margin: 10mm 18mm;
// }

.print_info_box {
  padding: 25px 50px;

  .title_box {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 30px;
  }

  .tableStyle {
    font-size: 14px;
    color: #000;
    text-align: center;
    margin-bottom: 30px;
  }

  .public {
    margin-bottom: 15px;
  }
}
</style>