打印测试

src/components/Common/print-test.vue

@@ -0,0 +1,110 @@
+<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: 50px; text-align: center; font-weight: 600;}
+.order-info {font-size: 24px;}
+th,td {font-size: 32px;}
+/*#printMe {*/
+/*  font-family: sans-serif;*/
+/*}*/
+
+/*.table tbody tr td{overflow: hidden;font-size:5mm; padding-bottom: 5mm;}*/
+
+/*button {position: fixed; right: 10; font-size: 24px;}*/
+</style>