window.print()打印 抬头页尾固定 中间表格自动分页

window.print()打印 抬头页尾固定 中间表格自动分页

直接上代码：

<template>
  <div class="receipt-order-print-sp" ref="receiptOrderPrintref" hidden="hidden" style="margin-left: -10px;">
    <table
      width="100%"
      border="1"
      style="text-align:left;border-collapse:collapse;table-layout:fixed;word-break:break-all"
    >
      <thead>
        <tr>
          <td colspan="12" style="border: 1px solid #FFFFFF;border-bottom: 1px solid #000;">
            <div class="title" style="padding-top: 12px;">
            <img class="logoimg" src="../../../../public/static/file/logo.png" />
            销售出货单
          </div>
          <div class="summarysp" style="padding-bottom: 12px;">
            <div class="col3">客戶:{{ row.customerName }}</div>
            <div class="col4">单据编号: {{ row.shipmentOrderNo }}</div>
            <div class="col3" style="margin: 4px 0;">送货地址: {{ row.deliveryAddress }}</div>
            <div class="col4" style="margin: 4px 0;">单据日期: {{ row.createTime }}</div>
            <div class="col4" style="width: 30%;">联系人: {{ row.contactPerson }}</div>
            <div class="col4">联系电话: {{ row.phone }}</div>
          </div>
		</td>
          
        </tr>
        <div style="margin-top: 10px;"></div>
        <tr class="tab-top" style="height: 20px;">
          <th colspan="1">序号</th>
          <th colspan="2">存货名称</th>
          <th colspan="2">规格型号</th>
          <th colspan="1">单位</th>
          <th colspan="1">数量</th>
          <th colspan="1">销售金额</th>
          <th colspan="1">赠品</th>
          <th colspan="3">备注</th>
        </tr>
      </thead>
      <tbody style="page-break-before: auto;">
        <tr v-for="(it, index) in row.details" :key="index" class="tdcenter">
          <td colspan="1">{{ index + 1 }}</td>
          <td colspan="2">{{ it.itemName || '' }}</td>
          <td colspan="2">{{ it.specificationModel || '' }}</td>
          <td colspan="1">{{ it.unit || '' }}</td>
          <td colspan="1">{{ it.planQuantity }}</td>
          <td colspan="1">{{ it.price }}</td>
          <td colspan="1"></td>
          <td colspan="3">{{ it.remark }}</td>
        </tr>
        <tr class="tdcenter">
          <td colspan="1"></td>
          <td colspan="2">合计:</td>
          <td colspan="2"></td>
          <td colspan="1"></td>
          <td colspan="1">{{ row.totalCount }}</td>
          <td colspan="1"></td>
          <td colspan="1"></td>
          <td colspan="3"></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="12" style="border: 1px solid #FFFFFF">
          <div class="foot" style="margin-top: 4px;">
            <div>第一联：存根联（白） 第二联：客户联（红） 第三联：回执联（蓝） 第四联：运输（绿） 第五联：仓库（黄）</div>
          </div>
          <div class="foot" style="margin-top: 4px;">
            <div class="summarysp">
              <div class="col4" style="width: 30%;">制单人:{{ nickName }}</div>
              <div class="col4">审核人: {{ row.handledBy }}</div>
            </div>
          </div>
          <div style="margin-top: 30px;">
            <div class="col3">送货车牌号:</div>
            <div style="margin-top: 4px;font-size: 12px;width: 100%;display: flex;">
              <span style="width: 60%;display: inline-block;">送货司机及电话号码: </span>
              <span style="display: inline-block;">收货单位及收货人签字盖章: </span>
            </div>
          </div>
        </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: ['row', 'list', 'printnum'],
  computed: {
    ...mapGetters([
      'nickName'
    ]),
  },
  methods: {
    start() {
      this.$print(this.$refs.receiptOrderPrintref, {}, 'A4')
    },
  }
}
</script>

<style lang="stylus" media="print">
@page {
  size: auto;
  margin: 0; /* 设置页面边距 */
}

@media print {
  body {
    margin: 0;
    padding: 0;
  }

  table {
    width: 100%;
    table-layout: fixed;
    page-break-inside: avoid;
    page-break-after: avoid;
    page-break-before: avoid;
    border-collapse: collapse;
    border-spacing: 0;
    word-break: break-all; /* 防止内容溢出 */
  }

  thead {
    display: table-header-group; /* 固定表头 */
  }
  tfoot {
    display: table-footer-group; /* 固定表尾 */
  }

  tr {
    page-break-inside: avoid; /* 防止表格行被切割 */
  }
  
  th, td {
    border: 0.05rem solid #000;
    font-size: 12px;
    word-break: break-all; /* 防止内容溢出 */
  }

  .receipt-order-print-sp {
    width: 100% !important;
    font-size: 12px;
    padding: 0 12px;
    line-height: 1.8;
  }

  .summarysp {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px !important;
  }

  .col3 {
    width: 66%;
    font-size: 12px;
  }

  .col4 {
    font-size: 12px;
  }

  .title {
    font-size: 22px;
    text-align: center;
    line-height: 30px;
  }

  .logoimg {
    width: 53.28px;
    height: 18px;
    margin-right: 10px;
  }

  .foot {
    font-size: 12px;
  }

  .common-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .common-table th, .common-table td {
    border-color: black;
  }

  .tdcenter td {
    padding: 5px;
    text-align: center;
  }
  .tab-top{
    th{
      border: 1px solid #000;
      text-align: center;
    }
  }
}
</style>

{
border-color: black;
}

.tdcenter td {
padding: 5px;
text-align: center;
}
.tab-top{
th{
border: 1px solid #000;
text-align: center;
}
}
}