前端vue打印功能实现

 

methods：{

方法

print(obj){

    var newWindow = window.open("打印窗口","_blank");

    var docStr = obj.innerHTML;

 

    newWindow.document.write('<lin' + 'k hr' + 'ef="//frontend.mofangchuxing.com/element-ui/index.css?print" re' + 'l="stylesheet">');

    newWindow.document.write('<lin' + 'k hr' + 'ef="ent.css?print" re' + 'l="stylesheet">');

 

    newWindow.document.write(docStr);

    newWindow.document.close();

    newWindow.print();

    newWindow.close();

}

点击事件

printCheckoutDetail: function(){

                var _this = this

                var obj = _this.$refs.checkout;

                this.print(obj);

            },

}

html部分

<div class="crs-cs-detail">

      <div class="crs-order-detail" ref="checkout" style="width:96%;padding:0 2%;">

          <p class="detail_title" style="font-weight:600;color:#333333;">{{bill.billTitle}} {{bill.orderDesc}}</p>

          <el-table style="border:1px solid #f5f5f5;width:100%" v-model="bill.tableHead">

                <el-table-column :label="bill.tableHead.breakDesc" width="200"></el-table-column>

          </el-table>

      </div>

      <el-button type="primary"  @click="printCheckoutDetail">打印</el-button>

</div>