一、安装

1、Vue2安装

npm install vue-print-nb --save

<!-- 全局配置：main.js -->
import Print from 'vue-print-nb'
// Global instruction 
Vue.use(Print);


<!-- 局部配置：main.js -->
// Local instruction
import print from 'vue-print-nb'

directives: {
    print   
}

2、Vue3配置

npm install vue3-print-nb --save

// Global instruction 
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

//or

// Local instruction
import print from 'vue3-print-nb'

directives: {
    print   
}

二、使用（以Vue2为例）

1、定义打印区域，以id标识，例如：

<template>
  <div class="app-container">
    <!-- 工作任务详情对话框 -->
      <div class="print-body" id="print-body">
        <el-descriptions title="工作任务" :column="2" border>
          <el-descriptions-item label="任务编号" labelStyle="width: 120px">RW230110000001</el-descriptions-item>
          <el-descriptions-item label="任务标题" labelStyle="width: 120px">各区县针对电诈事件进行摸排查访及登记</el-descriptions-item>
          <el-descriptions-item label="任务内容" :span="3">各区县针对电诈事件进行摸排查访及登记</el-descriptions-item>
          <el-descriptions-item label="任务类型">执法任务</el-descriptions-item>
          <el-descriptions-item label="任务等级">重大</el-descriptions-item>
          <el-descriptions-item label="任务期限">2023-08-15</el-descriptions-item>
          <el-descriptions-item label="备注说明" :span="3">测试信息</el-descriptions-item>
        </el-descriptions>
      </div>
  </div>
</template>

备注说明：以上Div长宽请自行定义

2、定义操作按钮

<template>
  <div class="app-container">
    <!-- 工作任务详情对话框 -->
      <div class="print-body" id="print-body">
        <el-descriptions title="工作任务" :column="2" border>
          <el-descriptions-item label="任务编号" labelStyle="width: 120px">RW230110000001</el-descriptions-item>
          <el-descriptions-item label="任务标题" labelStyle="width: 120px">各区县针对电诈事件进行摸排查访及登记</el-descriptions-item>
          <el-descriptions-item label="任务内容" :span="3">各区县针对电诈事件进行摸排查访及登记</el-descriptions-item>
          <el-descriptions-item label="任务类型">执法任务</el-descriptions-item>
          <el-descriptions-item label="任务等级">重大</el-descriptions-item>
          <el-descriptions-item label="任务期限">2023-08-15</el-descriptions-item>
          <el-descriptions-item label="备注说明" :span="3">测试信息</el-descriptions-item>
        </el-descriptions>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-print="printOption">打印</el-button>
      </div>
  </div>
</template>

3、定义操作属性值

在export default {data() {printOption: { id: 'print-body', // 打印元素的id 不需要携带#号 popTitle: '工作任务' // 页眉标题默认浏览器标题空字符串时显示undefined 使用html语言 },}}

export default {
  data() {
    printOption: {
      id: 'print-body',   // 打印元素的id 不需要携带#号
      popTitle: '工作任务' // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
    },
  },
};

完成，请点击按钮测试！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/819210.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！