前端打印 --

主界面

<template>
  <div class="common-content">
    公司信息
    <div id="app">
      <button @click="printDemo">测试打印</button>
      <vue-easy-print tableShow ref="easyPrint">
        <!-- 你自己编写打印的模板 -->
        <!-- <template slot-scope="func">
          <demo :getChineseNumber="func.getChineseNumber"></demo>
        </template> -->
        <demo :tableData="tableData"></demo>
      </vue-easy-print>
    </div>
  </div>
</template>

<script>
import vueEasyPrint from "vue-easy-print";
import demo from "./components/Point";
export default {
  name: "App",
  data() {
    return {
      tableData: {}
    };
  },
  methods: {
    printDemo() {
      this.$refs.easyPrint.print();
    }
  },
  components: {
    vueEasyPrint,
    demo
  }
};
</script>


<style lang="scss" scoped>
// #app>div{
//   display: none;
// }
</style>

打印组件

<template>
  <div>
    <div v-for="page in pages" :key="page" style="padding: 0 50px">
      <!-- 分页 -->
      <div class="tab_company_out">
        <table cellpadding="0" cellspacing="0">
          <tr>
            <th style="width:10%">商品编码</th>
            <th style="width:10%">商品条码</th>
            <th style="width:10%">商品名称</th>
            <th style="width:5%;">数量</th>
            <th style="width:10%">批次号</th>
            <th style="width:10%">失效日期</th>
            <th style="width:10%">备注</th>
          </tr>

          <tr v-for="item in resData.slice((page-1)*onePageRow,page*onePageRow)" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.address}}</td>
            <td style="text-align: center">{{item.number}}</td>
            <td>{{item.address}}</td>
            <td>{{item.address}}</td>
            <td>{{item.address}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "printUser",
  // 制作打印模版组件时，props区域尽量保留。
  props: {
    // 接受的打印数据
    tableData: {},

    // 每页多少行
    onePageRow: {
      type: Number,
      default: 20
    },
    // 是否插入空白行
    blankLines: {
      type: Boolean,
      default: true
    },
    getChineseNumber: Function // 求数字的中文写法，从easyPrint组件传入
  },
  data() {
    return {
      resData: [
        {
          number: 20,
          name: "660020200621",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          number: 200,
          name: "660020200621",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          number: 200,
          name: "660020200621",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          number: 20,
          name: "660020200621",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          number: 200,
          name: "660020200621",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          number: 200,
          name: "660020200621",
          address: "上海市普陀区金沙江路 1517 弄"
        },
         {
          number: 20,
          name: "660020200621",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          number: 200,
          name: "660020200621",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          number: 200,
          name: "660020200621",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          number: 20,
          name: "660020200621",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          number: 20,
          name: "660020200621",
          address: "上海市普陀区金沙江路 1519 弄"
        }
      ]
    };
  },
  computed: {
    pages() {
      console.log(this.resData.length / this.onePageRow);
      // 求当前数据能打印的页数
      let pages_ = Math.ceil(this.resData.length / this.onePageRow); // 向上取整数*/
       return pages_ <= 0 ? 1 : pages_;
      // return 1;
    },
    chineseTotal() {
      // 计算中文合计，如果忘记传入
      return this.getChineseNumber != null
        ? this.getChineseNumber(this.resData.total_amount)
        : "您还没有传入getChineseNumber";
    }
  },

  methods: {
    test() {
      console.log("21111111111111");
      console.log("test");
    }
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  list-style-type: none;
  font-family: "微软雅黑";
  font-size: 12px;
}

.tab_company_out {
  text-align: center;
  width: 100%;
  margin: auto;
  page-break-after: always;
}

h3 {
  font-size: 14px;
}

.dan {
  text-align: center;
  position: relative;
}

.dan span {
  position: absolute;
  right: 0;
}

p {
  overflow: hidden;
  padding: 10px 0;
}

p span {
  float: left;
}

p span ins {
  text-decoration: underline;
}

p time {
  float: right;
}

table {
  width: 100%;
  border: none;
  border-bottom: 1px solid #000;
}

table tr td {
  border: 1px solid #000;
  border-bottom: none;
  border-right: none;
  height: 20px;
  line-height: 20px;
  text-align: left;
}

table tr td:last-of-type,
table tr th:last-of-type {
  border-right: 1px solid #000;
}

table tr th {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
}

table tr th:nth-child(2) {
  width: 0;
}

.lu {
  display: inline-block;
  padding-top: 10px;
}

.lu li {
  float: left;
  text-align: left;
  margin-right: 15px;
}

.lu li label {
  width: 100px;
  display: inline-block;
}

.lu li:last-of-type {
  margin-right: 0;
}

@page {
  size: auto A4 landscape;
  margin: 3mm;
}

/* .tab_company_out{
  display: none;
} */
</style>

*********打印带滚动条的table时，出现了只显示一张的情况
解决办法：
/dom显示高度的设置/
html, body {
height: 100%;
}
#query-table {
height: 100%;
}
#queryTable {
height: 100%;
}
/打印高度的设置/ -----浏览器打印界面样式编写
@media print {
html, body {
height: inherit;
}
#query-table {
height: inherit;
}
#queryTable {
height: inherit !important;
}
}