vue-print-nb使用（实现分页打印）

参考链接：vue-print-nb - npm (npmjs.com)https://www.npmjs.com/package/vue-print-nb

一、安装

1、Vue2安装

npm install vue-print-nb --save

import Print from 'vue-print-nb'
// Global instruction 
Vue.use(Print);



// 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标识，例如：

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

2、定义操作按钮

3、定义操作属性值

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

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

完成，请点击按钮测试！