vue中打印指定dom元素

和window.print()效果一样，调出打印窗口，只是当前使用的插件是vue-print-nb

官网地址：vue-print-nb

vue2中使用

安装插件

npm install vue-print-nb --save

导入插件

import Print from 'vue-print-nb'
// 全局使用
Vue.use(Print);//or// 单个文件中引入指令
import print from 'vue-print-nb'directives: {print   
}

vue3中使用

安装插件

npm install vue3-print-nb --save

导入插件

// 全局
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// 局部
import print from 'vue3-print-nb'directives: {print   
}

使用

<template><div>              <el-button v-print="printObj">打印</el-button></div><div id="printContainer">打印内容区域，在指定打印区域内容的标签上绑定id</div>
</template>
<script>
export default {data() {return {printObj: {id: "printContainer", // 这里是要打印元素的idpopTitle: "卡", // 打印的标题extraCss: "", // 打印可引入外部的一个 css 文件extraHead: "", // 打印头部文字beforeOpenCallback (vue) {vue.printLoading = trueconsole.log('打开之前')},openCallback (vue) {vue.printLoading = falseconsole.log('执行了打印')},closeCallback (vue) {console.log('关闭了打印工具')}}},};}}
}
</script>
<style scoped>
@page {  /* 打印A4大小，不需要删除即可 */  size: auto A4 landscape;margin: 3mm;}
</style>