vue2 vue-print-nb

一、安装插件

1、npm install vue-print-nb --save

二、引入Vue项目

在main.js中添加-- 全局挂载

    import Print from 'vue-print-nb'

    Vue.use(Print)

 三、前端代码

一、操作项中的打印按钮
   <span title="打印">
      <svg-icon icon-class="printer" class="svgicon" @click="showPrinterDialog(scope.row)" />
    </span>
二、打印组件

  <!-- 打印内容 -->

    <itemPrint :itemData="showPrinterParams.itemData" :showPrinterDialogClick="showPrinterParams.showPrinterDialogClick"></itemPrint>

  三、参数定义

  showPrinterParams: {

        itemData: {},

        showPrinterDialogClick: ''

      },

四、 打开打印页面

    showPrinterDialog(row) {

      this.showPrinterParams.itemData = row

      this.showPrinterParams.showPrinterDialogClick = Math.random() + ''

    }

五、引入打印组件

import itemPrint from '@/views/lawcase/task_manager/task_transfer/item_transfer_print'

  components: {

    itemPrint

  },

四、打印页面代码

<template>
  <el-dialog width="60%"  :visible.sync="visible" >
    <div id="print-tag" >
      <!--标题 -->
      <h2 class="title"> 流转通知单</h2>
      <div class="timeShow">
        通知时间：<span class="space">    年    月    日 </span>
      </div>
      <div class="printCls">
        <div class="tableCls">
          <div>
            <div><span>原案件名称/编号</span> <span> {{ printData.original }} </span></div>
            <div><span>原移交单位</span> <span> {{printData.orgName}} </span></div>
            <div><span>流转去向</span> <span class="right-none"> {{printData.targetOrg}}</span></div>
          </div>
          <div>
            <div><span>现案件名称/编号</span> <span>{{printData.caseInfo}}</span></div>
            <div><span>流转方式</span> <span style="text-decoration:underline">随案移交 </span></div>
            <div><span>流转时间</span> <span  class="right-none">{{printData.changeTime}}</span></div>
          </div>
          <div>
            <div><span ><span class="itemTop">物品名称：{{printData.itemName}}</span></span> <span> <span class="itemTop">合计数量：{{printData.itemNum}}</span></span></div>
            <div><span>特征备注</span><span class="right-none"></span></div>
            <div><span class="right-none"></span> <span class="right-none"></span></div>
          </div>
          <div>
            <div><span>移交人</span>   <span></span></div>
            <div><span>移交时间</span>  <span></span></div>
            <div><span>联系电话</span>  <span  class="right-none"></span></div>
          </div>
          <div>
            <div><span>接收人</span>   <span></span></div>
            <div><span>接收时间</span>  <span></span></div>
            <div><span>联系电话</span>  <span  class="right-none"></span></div>
          </div>
          <div>
            <div><span class="vertical"><span class="itemTop">保管单位：</span></span> <span>负责人：</span></div>
            <div><span class="vertical">首次入库时间</span><span class="vertical"></span> </div>
            <div><span class="vertical">联系电话</span><span  class="right-none"></span></div>
          </div>
          <div>
            <div><span class="vertical"></span> <span class="bottom-none">经手人：</span></div>
            <div><span class="vertical"></span><span class="vertical"></span> </div>
            <div><span class="vertical"></span><span  class="right-bottom-none"></span></div>
          </div>
        </div>
      </div>
      <div class="printBottom">此通知单一式三份</div>
    </div>
    <div slot="footer">
      <el-button  @click="handleCancel"> 关闭 </el-button>
      <el-button type="primary"  @click="handlePrint" v-print="printContent"> 打印 </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    itemData: {
      type: Object,
      default: {}
    },
    showPrinterDialogClick: {
      type: String,
      default: ''
    },
  },
  watch: {
    // 点击父组件储位时，显示选择储位
    showPrinterDialogClick(val) {
      this.visible = true
    },
    itemData(val) {
      this.printData = val
      let name = val.originalName;
      if(name !=null){
         // 原案件名称/编号
          this.printData.original =val.originalName+"/"+val.originalCode
          // 原单位
          this.printData.orgName = this.getDeptName(val.originalOrg)
          // 流转去向
          this.printData.targetOrg =this.getDeptName(val.orgUuid)
          // 案件名称/编号
          this.printData.caseInfo = val.caseName+"/"+val.caseCode
          this.printData.changeTime = this.$publicjs.fullDate(val.changeTime)
      }else{
          this.printData.original =val.caseName+"/"+val.caseCode
          // 原单位
          this.printData.orgName = this.getDeptName(val.orgUuid)
      }
    }
  },
  data() {
    return {
      visible:false,
      showTreeDialog: false,
      printData: {},
      printContent: {
        id: 'print-tag',
        // 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: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        previewBeforeOpenCallback() {},
        previewOpenCallback() {},
        beforeOpenCallback(vue) {
          vue.printLoading= true;
        },
        openCallback(vue) {
          vue.printLoading=false
        },
        closeCallback() {},
        clickMounted(vue) {}
      },
    }
  },
  methods: {
     handlePrint(){

     },
     // 关闭
     handleCancel(){
       this.visible = false;
     },
     // 根据组织编号得到组织名称
     getDeptName(id) {
      return this.$publicjs.getDeptName(id);
     },
  }
}
</script>
<style lang="less" scoped>
.title{
  text-align:center;
  margin-bottom:5px;
}
.timeShow{
  margin-left:10px;
}
// 年月日的空格
.space{
  word-spacing:40px;
}
.itemTop{
 margin-left:-20px; 
}
.printCls{
  border:1px solid #999;
  }
  .tableCls{
    & > div{
      display:flex;
      & > div{
        flex: 1;
        display: flex;
        & > span {
          flex:1;
          padding:25px;
          border: 1px solid #999;
          border-top:none;
          border-left: none;
        }
        .right-none{
          border-right: none;
        }
        .right-bottom-none{
          border-right: none;
          border-bottom: none;
        }
        .bottom-none{
          border-bottom: none;
        }
        .style-none{
          border-right: none;
          border-left: none;
        }
        .vertical{
          border-top:none;
          border-bottom: none;
        }
      }
    }
  }
  .printBottom{
    text-align:center;
    margin-top:10px;
  }
</style>

六、结果展示