说明

在VUE下如果需要打印表单之类的，我们可以使用window.print() 方法进行打印，但是VUE的页面是单页面应用，所以他打印的话是打印的整个窗口。

解决办法

将需要打印的页面独立成一个页面，然后访问打印页面的时候，直接去访问打印页面。

页面打印的代码如下：

打印的HTML:

<div slot="toolheader" class="noprint" border="true" foldheader="true" foldbtn="false" align="right">
        <div style="padding-top:16px;padding-right: 16px;padding-bottom: 16px;">
          <a-button type="primary" id="btnPrint" >打印</a-button>
        </div>
      </div>
      <div class="fitContainer">
        <div class="contents">
          <div class="fitContentBox" ref="printArea">

            <bpm-inst-info :bpmInst="bpmInst" />

            <rx-forms ref="rxForms" v-if="formType=='online'"> </rx-forms>
            <component ref="customForm" :is="formComponent" :pk="pk" v-else></component>
          </div>
        </div>
      </div>

点击打印调用的代码:

print(){
    var self_=this;
    //先获取当前body的内容
    var bodyHtml=window.document.body.innerHTML;
    //获取打印区域的内容
    var printHtml=this.$refs[this.printArea].innerHTML;
    //将body的内容进行替换
    window.document.body.innerHTML=printHtml;
    //执行打印。
    window.print();
    setTimeout(function () {
        //恢复之前的打印内容
        window.document.body.innerHTML=bodyHtml;
        //之前的vue的打印点击事件失效，这里进行重新进行绑定。
        document.getElementById(self_.btnPrint).addEventListener("click",function () {
            self_.print();
        })
    },1000)
}