supply-front/src/components/Common/print-test.vue

<template>
  <div id>
    <remote-css cdn="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"></remote-css>
<!--    <button type="button" @click="doPrint()">打印</button>-->
    <!--startprint-->
    <div class="page" id="printMe" style="margin-left: 20mm;">
      <div class="top-title">
        <p class="ref-title">重庆壳牌能源有限公司中央仓收货单</p>
      </div>
      <div class="order-info px-4 mb-2">
        <div>
          <span>收货日期：</span><span>${_receiptModel.workDate}</span>
          <span>订单编号：</span><span>${_receiptModel.sheetId}</span>
          <span>相关单号：</span><span>${_receiptModel.refSheetId}</span>
        </div>
        <div>
          <span>供应商：</span><span>${_receiptModel.vender}</span>
        </div>
      </div>
      <div>
        <table class="table">
          <thead>
          <tr>
            <th nowrap class="font-weight-normal">商品条码</th>
            <th nowrap class="font-weight-normal px-0">商品名称</th>
            <th nowrap class="text-center font-weight-normal">箱装数</th>
            <th nowrap class="text-center font-weight-normal">预定箱数</th>
            <th nowrap class="text-center font-weight-normal">预定总数</th>
            <th nowrap class="text-center font-weight-normal">保质期</th>
            <th nowrap class="text-center font-weight-normal">推荐库位</th>
            <th nowrap class="text-center font-weight-normal">生产日期</th>
          </tr>
          </thead>
          <tbody>
            <tr><td>商品条码1</td><td>商品名称</td><td>箱装数</td><td>预定箱数</td><td>预定总数</td><td>保质期</td><td>推荐库位</td><td>生产日期</td></tr><tr><td>商品条码2</td><td>商品名称</td><td>箱装数</td><td>预定箱数</td><td>预定总数</td><td>保质期</td><td>推荐库位</td><td>生产日期</td></tr>
            <tr><td>商品条码3</td><td>商品名称</td><td>箱装数</td><td>预定箱数</td><td>预定总数</td><td>保质期</td><td>推荐库位</td><td>生产日期</td></tr>
            <tr><td>商品条码4</td><td>商品名称</td><td>箱装数</td><td>预定箱数</td><td>预定总数</td><td>保质期</td><td>推荐库位</td><td>生产日期</td></tr>
            <tr><td>商品条码5</td><td>商品名称</td><td>箱装数</td><td>预定箱数</td><td>预定总数</td><td>保质期</td><td>推荐库位</td><td>生产日期</td></tr>
            <tr><td>商品条码6</td><td>商品名称</td><td>箱装数</td><td>预定箱数</td><td>预定总数</td><td>保质期</td><td>推荐库位</td><td>生产日期</td></tr>
            <tr><td>商品条码7</td><td>商品名称</td><td>箱装数</td><td>预定箱数</td><td>预定总数</td><td>保质期</td><td>推荐库位</td><td>生产日期</td></tr>
            <tr><td>商品条码8</td><td>商品名称</td><td>箱装数</td><td>预定箱数</td><td>预定总数</td><td>保质期</td><td>推荐库位</td><td>生产日期</td></tr>
          </tbody>
        </table>
      </div>
    </div>
    <el-button v-print="printObj" type="primary" icon="el-icon-printer">打 印</el-button>
  <!--endprint-->
  </div>
</template>

<script>
import print from 'vue-print-nb';

export default {
  name: 'PrintTest',
  components: {
    'remote-css': {
      render(h) {
        return (
          <link rel='stylesheet' type='text/css' href={this.cdn} />
        )
      },
      props: {
        cdn: {
          type: String,
          required: true
        }
      }
    }
  },
  directives: {
    print
  },
  data() {
    return {
      printObj: {
        id: 'printMe'
      },
    }
  },
  methods: {

    doPrint() {
      // let bdhtml=window.document.body.innerHTML;
      // let sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符
      // let eprnstr="<!--endprint-->"; //结束打印标识字符串
      // let prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
      // prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
      // window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTML
      window.print();
      // window.document.body.innerHTML=bdhtml;
    }
  }
}
</script>

<style scoped>
/*.page {width: 220mm; height: 140mm; position: relative; margin: 0 auto; overflow: hidden;}*/
/*.top-title {position: relative;}*/
.ref-title {font-size: 36px; text-align: center; font-weight: 600;}
.order-info {font-size: 18px;}
th,td {font-size: 18px;}
#printMe {
  font-family: "Microsoft YaHei","Arial","黑体",sans-serif;
}

/*.table tbody tr td{overflow: hidden;font-size:5mm; padding-bottom: 5mm;}*/

/*button {position: fixed; right: 10; font-size: 24px;}*/
</style>