vue插件(vue-print-nb)实现打印功能

1、安装vue-print-nb

Vue2.0版本安装方法：
npm install vue-print-nb --save

Vue3.0版本安装方法：
npm install vue3-print-nb --save

2、引入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   
}

3、在组件中使用

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

<!--//通过按钮来调用-->
 <el-button type="primary" round v-print="printContent">打印 </el-button>
<!--//需要打印的页面-->
<div id="printDiv" class="table-box">
  <div class="client-name">客户名称: XXX</div>
   <table
     v-for="(item, index) of tableData"
     class="table-item"
     :key="index"
     border="1px solid #ccc"
     cellspacing="0"
     cellpadding="0"
   >
     <tbody>
       <tr>
         <td class="head" rowspan="3">客户地址</td>
         <td rowspan="3" colspan="5">XXX</td>
         <td>本次抄表时间</td>
         <td>2023年1月1日</td>
       </tr>
       <tr>
         <td>上次抄表时间</td>
         <td>2022年1月1日</td>
       </tr>
       <tr>
         <td>互感器倍率</td>
         <td>1.5</td>
       </tr>
       <tr>
         <td class="head" rowspan="2">电表编号</td>
         <td class="head" rowspan="2">类型</td>
         <td class="head" colspan="3">正向有功(充电数据)</td>
         <td class="head" colspan="3">反向有功(放电数据)</td>
       </tr>

       <tr>
         <td class="head">上次示数(kWh)</td>
         <td class="head">本次示数(kWh)</td>
         <td class="head">本次充电(kWh)①</td>

         <td class="head">上次示数(kWh)</td>
         <td class="head">本次示数(kWh)</td>
         <td class="head">本次放电(kWh) ②</td>
       </tr>

       <tr>
         <td class="head" rowspan="5">并网表</td>
         <td>尖</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
       </tr>
       <tr>
         <td>高</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>

         <td>0</td>
         <td>0</td>
       </tr>
       <tr>
         <td>平</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>

         <td>0</td>
         <td>0</td>
       </tr>
       <tr>
         <td>谷</td>
         <td>0</td>
         <td>0</td>

         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
       </tr>
       <tr>
         <td class="head">总电量</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
       </tr>
       <tr>
         <td class="head" colspan="8">结算明细</td>
       </tr>
       <tr>
         <td class="head">类型</td>
         <td class="head">电价③</td>
         <td class="head">客户效益费率④</td>
         <td class="head">
           结算数量(kWh)
           <br />
           ②-①
         </td>
         <td class="head">
           本期节约电费(元)
           <br />
           ⑤=(②-①)*③
         </td>
         <td class="head">
           本期客户电费收益(元)
           <br />
           ⑥=④*⑤
         </td>
         <td class="head" colspan="2">
           本期应结算电费(元)
           <br />
           ⑤-⑥
         </td>
       </tr>
       <tr>
         <td>尖</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td colspan="2">0</td>
       </tr>
       <tr>
         <td>高</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td colspan="2">0</td>
       </tr>
       <tr>
         <td>平</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td colspan="2">0</td>
       </tr>
       <tr>
         <td>谷</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td colspan="2">0</td>
       </tr>
       <tr>
         <td class="head">合计</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td>0</td>
         <td colspan="2">0</td>
       </tr>
       <tr>
         <td colspan="3">本期节约电费(元) a</td>
         <td colspan="5">2000</td>
       </tr>
       <tr>
         <td colspan="3">本期客户电费收益(元) b</td>
         <td colspan="5">1000</td>
       </tr>
       <tr>
         <td colspan="3">本期应结算电费(元) c = a - b</td>
         <td colspan="2">1000</td>
         <td colspan="3">1000</td>
       </tr>
     </tbody>
   </table>

   <div class="bottom-box">
     <div>附页: 浙江省5月份电价、收款通知</div>
     <div>客户经办人</div>
     <div class="unit">
       <span>收款单位(签章): XXXXXXXXXXXXXXXXXX</span>
       <span>经办人: XXX</span>
     </div>
   </div>
 </div>
 
<!--//data的return中--> 
  data() {
    return {
      printContent: {
        id: 'printDiv',
        // preview: true, // 预览工具是否启用
        // previewTitle: '储能服务费结算单', // 预览页面的标题
        // popTitle: '储能服务费结算单', // 打印页面的页眉
        extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
        extraHead: '',
        previewBeforeOpenCallback () {
          console.log('正在加载预览窗口')
        },
        previewOpenCallback () {
          console.log('已经加载完预览窗口')
        },
        beforeOpenCallback (vue) {
          vue.printLoading = true
          console.log('打开之前')
        },
        openCallback (vue) {
          vue.printLoading = false
          console.log('执行了打印')
        },
        closeCallback () {
          console.log('关闭了打印工具')
        },
        clickMounted (vue) {
          console.log('点击了打印按钮')
          // vue.printSet.popTitle = vue.tableHead // 动态设置页眉
        }
    };
  },

4、vue-print-nb插件优化

1.去掉页眉页脚

<style lang="scss" scoped>
@page {
    size: auto;
    margin: 0mm;
  }
</style>

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

<style lang="scss" scoped>
  .procedure{
      word-wrap:break-word;
   }
</style>

3. 样式布局不生效问题

<style lang="scss">
@media print { 
  //样式写在这里面
}
 .title {
   word-wrap:break-word; //内容不自动换行问题
  }
</style>