一、安装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", // 这里是要打印元素的ID
        popTitle: "&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>