vue打印功能-每页都有表头和一页打印20行表格-$print组件

打印功能vue 插件$print

1. 使用div进行布局-table表格调试会比较困难/ html部分
至于安装$print组件可以到百度上找、分享一下打印的想法。我使用的时候组件已经安装好，所有哈哈哈自行百度

  <el-button
          @click="handlePrint"
          type="info"
          size="mini"
          icon="el-icon-printer"
          >打印</el-button
        >
<div style="display:none">
      <div ref="stamp" style="width:100%;">
        <div
          v-for="(t, i) in pagenum"
          :key="i"
          class="content"
          style="page-break-after: always;"
        >
          <div ref="headers" style="width: 100%;text-align: center;">
            <div>
              <span style="font-size: 24px;">分支机构名称</span><br />
              <span style="font-size: 20px;">分销订单</span>
            </div>
          </div>

          <hr />
          <div ref="centers" style="margin: 0 auto;padding: 0;width: 100%;">
            <ul
              style="display: inline-block;display: flex;flex-wrap: wrap;padding: 0; margin:0;"
            >
              <li
                style="display: inline-block;width: 33.33%;font-size: 16px;margin: 5px 0;"
              >
                客户名称: <span>{
  { MainData.contactor }}</span>
              </li>
              <li
                style="display: inline-block;width: 33.33%;font-size: 16px;margin: 5px 0;"
              >
                联系电话 {
  { MainData.contacttel }}
              </li>
              <li
                style="display: inline-block;width: 33.33%;font-size: 16px;margin: 5px 0;"
              >
                单号 <span> {
  { MainData.billcode }}</span>
              </li>