vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3前端打印功能

Vue3前端做打印页面信息实现打印功能(打印界面某个部分)

作者:KT553

这篇文章主要介绍了如何使用vue3-print-nb依赖在Vue 3项目中实现页面打印功能,提供了完整的代码示例,大家可以根据项目需求选择合适的打印方法,需要的朋友可以参考下

一、先看效果:

二、使用的依赖:

使用的是: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" 自定义指令绑定打印的按钮。

需要打印的区域通过使用 id="printInfo"  绑定。

完整代码:

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

  <!-- 需要打印的区域 -->
  <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>北京市-朝阳区-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">规格</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>发货人:</span>
          <span>________</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
// 打印区域配置对象
const printInfoObj = {
  id: "printInfo",
  popTitle: "收货人信息表", // 打印页面的页眉
  preview: false,  // 是否开启预览
  beforeOpenCallback(vue) {
    // console.log('触发打印工具打开前回调')
    vue.printLoading = true;
  },
  openCallback(vue) {
    // console.log('触发打印工具打开的回调')
    vue.printLoading = false;
  },
  closeCallback() {
    // console.log('触发关闭打印工具回调')
  },
  previewBeforeOpenCallback() {
    // console.log('触发预览前回调')
  },
  previewOpenCallback() {
    // console.log('触发预览的回调')
  },
};
</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>

五、欢迎参考:

打印的方式很多,大家选择适合自己项目的即可

到此这篇关于Vue3前端做打印页面信息实现打印功能的文章就介绍到这了,更多相关Vue3前端打印功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文