vue实现打印功能（vue-print-nb）

一、安装vue-print-nb

Vue2.0版本安装方法：

npm install vue-print-nb --save

Vue3.0版本安装方法：

npm install vue3-print-nb --save

二、引入Vue项目

Vue2.0引入方式：

// 1. 全局挂载import Print from 'vue-print-nb'Vue.use(Print)// or// 2. 自定义指令import print from 'vue-print-nb'directives: {print}

Vue3.0引入方式：

// 1. 全局挂载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 // 2. 自定义指令import print from 'vue3-print-nb'directives: {print }

三，在组件中使用

注意：一定要给需要打印的容器加一个id,点击打印按钮的时候调用传入的id

<!--//通过按钮来调用--><el-button type="primary" @click="dialogVisible" v-print="printObj">打印</el-button><!--//需要打印的页面--><div id="printMe" ref="printContent"><div class="hammer"><h3>黄山市机动车排放维修治理（M）站竣工出厂合格证</h3></div><!-- //内容 --><div class="trail"><p>该车经我站治理维护，准予出厂。</p></div></div>

data的return中

name: "print",data() {return {pageList: [],status: false,printObj: {id: "myPrint", // 这里是要打印元素的IDpopTitle: "&nbsp", // 打印的标题extraCss: "", // 打印可引入外部的一个 css 文件extraHead: "", // 打印头部文字},};},

vue-print-nb插件的一些优化

1.去掉页眉页脚

<style>@page {size: auto;margin: 0mm;}</style>

2.打印內容不自动换行问题

只需要给不自动换行的标签加上word-wrap:break-word;即可。

<style>.procedure{word-wrap:break-word;}</style>