vue使用vue-print 多页打印带表头

vue使用vue-print 多页打印带表头

多分页带表头的公共模板
https://www.cnblogs.com/Vena/p/17774181.html

<template>
  <div>
    <div id="printArticle" class="container">
      <TABLE>
     	<!-- 公共拥有的头部 start -->
        <THEAD>
	        <TR>
		        <TH>
		        </TH>
	        </TR>
        </THEAD>
       	<!-- 公共拥有的头部 end -->
		<!-- 表单内容 start -->
        <TBODY>
        	<TR>
            	<TD>
            		<!-- 根据自己的需要插入容，可以直接插入div，也可以插入table -->
					<table>
						<thead>
							<tr>
								<th>序号</th>
								<th>编码</th>
								<th>名称</th>
								<th>规格</th>
								<th>分类</th>
							</tr>
						</thead>
						<tbod>
							<tr v-for="item in row.details" :key="item.fid">
								<td>{{ item.fid }}</td>
								<td>{{ item.code }}</td>
								<td>{{ item.name }}</td>
								<td>{{ item.model }}</td>
								<td>{{ item.type }}</td>
							</tr>
						</tbody>
					</table>
            	</TD>
        	</TR>
        </TBODY>
        <!-- 表单内容 end-->
		<!-- 公共拥有的尾部 start-->
        <TFOOT>
	        <TR>
	        	<TD></TD>
	        </TR>
        </TFOOT>
        <!-- 公共拥有的尾部 end -->
      </TABLE>
    </div>
    
	<div class="flex-align-center-justify-center">
	      <el-button class="button-wh" type="primary" v-print="'#printArticle'">打印</el-button>
    </div>
  </div>
</template>

CSS样式（按照自己页面修改样式）

<style lang="scss" scoped>
.container {
  zoom: 0.8;
  box-sizing: border-box;
  padding: 0;
  background-color: #fff;
  border: 1px solid #000;

  @page {
    size: auto;
    margin: 0;
  }

  @media print {
    * {
      color: #000 !important;
    }

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

    table, tbody, thead {
      width: 100% !important;
    }

    table,table tr td {
      border:none;
    }

    .template-print {
      width: 100% !important;
      font-size: 14px;
    }

  }


  .row1{
    border-bottom: 1px solid #000;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: stretch;
    line-height: 25px;

    .row1-col{
      border-right: 1px solid #000;
      display: inline-block;
      float: left;
    }
  }

  .row-span{
    margin-right: 10px;
  }
}
</style>