vue使用v-print-nb插件实现A4纸张排版打印

1、安装v-print-nb插件

	npm install vue-print-nb --save

2、数据加载

/*打印预览*/
    printPdf(mergeEbeln) {
      this.signal = false;
      this.dylist = [];
      getPrintList({mergeEbeln:mergeEbeln}).then(response => {
        /*分页*/
        if (response.data.listdetail.length > 0) {
          response.data.text = "";
          this.inServForm = response.data
          //使用 .replace(/[\t]/g,''); 替换\t转义符，防止页面变形
          this.inServForm.modeldes = this.inServForm.modeldes.replace(/[\t]/g,'');
          this.dylist = this.doSplice(response.data.listdetail, 14)
          /*判断最后的签名信息是否单独起一页*/
          if (this.dylist[this.dylist.length - 1].length > 10) {
            this.signal = true
          }
          this.printShow = true
        }
      })
    },

3、 排版

changeFormat(){/*排版*/
      var declareHeight = this.$refs.declare.clientHeight;/*合同文本像素高度*/
      var changeFormatDIVHeight = this.$refs.changeFormatDIV.clientHeight;/*2cm*/
      var decalreReallyHeight = Math.floor((declareHeight/changeFormatDIVHeight)*2);/*合同文本厘米高度*/
      var leftHeight = 29.7-1.5-decalreReallyHeight;/*剩余部分高度*/
      var colunmNum = Math.floor(leftHeight/2);/*能放下几行*/
      this.dylist=[];
      /*分页*/
      var tempList = this.inServForm.listdetail;
      if (tempList.length > colunmNum) {
        this.dylist = this.doSpliceFormat(tempList,14,colunmNum);
      }else {
        this.dylist.push(tempList);
      }
      /*判断最后的签名信息是否单独起一页*/
      if(this.dylist.length>1){
        if (this.dylist[this.dylist.length - 1].length > 10) {
          this.signal = true;
        } else {
          this.signal = false;
        }
      }else if (this.dylist.length==1) {
        if (colunmNum - this.dylist[0].length<3){
          this.signal = true;
        } else {
          this.signal = false;
        }
      }
      this.printShow = true
      this.$refs.printHandle.$el.click();
    },

4、打印预览

<!--打印页面-->
    <!--startprint-->
    <el-dialog title="打印预览" :visible.sync="printShow" width="22cm" append-to-body>
      <el-form :model="inServForm" ref="inServForm" size="small">
        <el-form-item>
          <div  ref="changeFormatDIV" style="height: 2cm">
            <el-button
              v-print="'#printPage'"
              type="primary"
              icon="el-icon-printer"
              ref="printHandle"
            >
            </el-button>
            <el-button
              type="danger"
              plain
              icon="el-icon-printer"
              @click="changeFormat"
              style="margin-left: -50px;width: 2cm"
            >打印
            </el-button>
          </div>
        </el-form-item>
        <div id="printPage" ref="printPage" style="width: 21cm;page-break-before:always;margin: 0cm 1cm 1cm 0.5cm;">
          <template>
           <!-- el-table 或其他待打印内容 -->
          </template>
        </div>
        <el-form-item style="text-align: right">
          <el-button
            type="danger"
            plain
            icon="el-icon-printer"
            @click="changeFormat"
            style="width: 2cm"
          >打印
          </el-button>
          <el-button
            type="warning"
            plain
            icon="el-icon-d-arrow-left"
            @click="cancelPrint"
          >返回
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--endprint-->