vue-print-nb 的使用---打印指定dom

最新推荐文章于 2025-03-19 15:08:02 发布

myazwj

最新推荐文章于 2025-03-19 15:08:02 发布

阅读量774

点赞数 1

文章标签：前端 http es6

本文链接：https://blog.youkuaiyun.com/myazwj/article/details/121522715

版权

本文介绍了如何在Vue项目中使用vue-print-nb组件来实现指定DOM的打印功能。步骤包括安装、导入、注册组件以及在模板中设置打印按钮和目标ID，提供了一种简洁的页面打印解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-print-nb 的使用

作用：打印指定dom

使用：

安装 yarn add vue-print-nb

导入

在main.js导入 import Print from 'vue-print-nb'

注册

Vue.use(Print)

使用

在指定dom加上id id=‘xxx‘

在按钮上 v-print="{id:'xxx'}"

  <!-- 用div包着的只打印这部分 -->
      <div id="xxx">
        <!-- 工号 入职时间 -->
        <el-row class="inline-info">
          <el-col :span="12">
            <el-form-item label="工号">
              <el-input v-model="userInfo.workNumber" class="inputW" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入职时间">
              <el-date-picker
                v-model="userInfo.timeOfEntry"
                type="date"
                class="inputW"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 姓名 部门 -->
        <el-row class="inline-info">
          <el-col :span="12">
            <el-form-item label="姓名">
              <el-input v-model="userInfo.username" class="inputW" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门">
              <el-input v-model="userInfo.departmentName" class="inputW" />
            </el-form-item>
          </el-col>
        </el-row>
        <!--手机 聘用形式  -->
        <el-row class="inline-info">
          <el-col :span="12">
            <el-form-item label="手机">
              <el-input v-model="userInfo.mobile" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="聘用形式">
              <el-select v-model="userInfo.formOfEmployment" class="inputW">
                <el-option
                  v-for="item in EmployeeEnum.hireType"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 员工照片 -->
        <el-row class="inline-info">
          <el-col :span="12">
            <el-form-item label="员工头像">
              <!-- 放置上传图片 -->
              <uploadImg v-model="userInfo.staffPhoto" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>



<el-button v-print="{ id: 'xxx' }">打印</el-button>

就是用一个标签包裹你要打印的内容

就是用一个标签包裹你要打印的内容

1.在一个标签上定义id="printInfo

2. <el-button v-print="printInfo">打印</el-button>

3.再到data定义

// 打印的对象

printInfo: {

id: 'printInfo', // 要打印的容器的id

popTitle: '项目开始' // 页眉标题，你要定义的名字

},