打印指定的dom部分

smouns_

于 2021-11-24 20:26:54 发布

阅读量897

点赞数 3

CC 4.0 BY-SA版权

分类专栏： element-ui vue 文章标签： chrome 前端前端框架

本文链接：https://blog.youkuaiyun.com/smouns_/article/details/121524006

vue 同时被 2 个专栏收录

26 篇文章

订阅专栏

element-ui

10 篇文章

订阅专栏

本文介绍如何通过vue-print-nb插件实现仅打印特定DOM区域，如员工个人信息详情。首先安装插件，然后在组件中导入并注册，利用v-print指令配合id选择要打印的内容，点击按钮即可定制打印部分信息。

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

作用：打印指定dom

使用：

安装 yarn add vue-print-nb (npm i vue-print-nb) 插件
导入
- 在main.js导入 import Print from 'vue-print-nb'
注册
- Vue.use(Print)
使用
- 在指定dom加上id id=‘xxx‘
在按钮上输入该指令 v-print="{id:'xxx'}"

需求:只打印页面中这部分信息

<el-form label-width="220px">
      <div id="printMessage">
        <!-- 工号 入职时间 -->
      .....省略
      </div>
      <!-- 保存个人信息 -->
      <el-row class="inline-info" type="flex" justify="center">
        <el-col :span="12">

          <!-- 设置点击打印的按钮 -->
          <el-button
            v-print="{ id: 'printMessage' }"
            type="primary"
          >打印员工个人信息</el-button>

        </el-col>
      </el-row>
    </el-form>
....

点击该按钮之后效果: