zfire-newmall-admin/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>