[JavaScript知识库]vue-print-nb 的使用---打印指定dom

?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: '项目开始' // 页眉标题，你要定义的名字

? ? ? },