vue + vue-print-nb 实现打印 以及 样式布局问题

步骤：

1、安装插件： 

npm i vue-print-nb
npm install vue-print-nb --save

2、在 main.js 中引用

import Print from 'vue-print-nb'
Vue.use(Print); // 全局引用

3、在页面用使用

 <el-dialog custom-class="printClass" :visible.sync="dialogVisible" :before-close="handleClose">
      <div id="printTest">
        <div class="dynysjcontent" ref="printContent">
          <span class="title">打印数据</span> 
        </div>
      </div> 
        <el-button @click="dialogVisible = false">取 消</el-button>
        <v-button text="打印" v-print="printObj" @click="print" style="margin-left:15px;"></v-button> 
    </el-dialog>
 

export default {
data() {
    return {
        printObj: {
           id: 'printTest', //打印的内容范围 id
           popTitle: '打印', //打印的标题
           extraCss: "", // 打印可引入外部的一个 css 文件
           extraHead: "", // 打印头部文字
           previewTitle: '', // 打印预览的标题（开启预览模式后出现）
           previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
           zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）   
           previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
           previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
           beforeOpenCallback() {}, // 开启打印前的回调事件
           openCallback() {}, // 调用打印之后的回调事件
           closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
         }
      };
    }
},
methods: {
   print () { //调用接口事件
      this.$axios({
        method: 'GET',
        url: addPrintURL,
        params: {
          orderId: 1,
          orderType: ''
        },

      })
    },
}

4、样式布局不生效问题

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

5、去掉打印的页眉和页脚

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