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

秒速五厘米 2024-04-08 11:10 80阅读 0赞

### 一、安装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.去掉页眉页脚**

**2.打印內容不自动换行问题**  
只需要给不自动换行的标签加上 **`word-wrap:break-word;`** 即可。