Mistj's Digital Garden

Appearance

JS打印-页眉页脚如何定制

方案1. fixed 或者 absolute布局 ​

fixed方案: 每页会重复出现头部。问题是会和页面显示内容重叠遮挡，需要再调整页面内容的边距。

css
<div style="position: fixed; top: 0; left: 0;right:0;background: black; color: white; padding: 20px">  
  固定头部  
</div>
<div style="position: fixed; top: 0; left: 0;right:0;background: black; color: white; padding: 20px">  
  固定头部  
</div>

relative方案: 页面使用 relative + absolute 布局，并取消默认边距，手动处理边距。 这样问题是每页都得处理，简单场景可以参考处理。

css
@page {  
    /*取消打印距*/  
    margin: 0;  
    size: A4;  
}

.page-one {  
    /*height: 11in;*/  
    /* 宽度参考 https://stackoverflow.com/questions/3341485/how-to-make-a-html-page-in-a4-paper-size-pages */   
    height: 29.7cm;  
    position: relative;  
}
.bk-bar {  
    width: 100%;  

    bottom: 0;  
    left: 0;  
    right: 0;  
    display: block;  
    position: absolute;  
}
@page {  
    /*取消打印距*/  
    margin: 0;  
    size: A4;  
}

.page-one {  
    /*height: 11in;*/  
    /* 宽度参考 https://stackoverflow.com/questions/3341485/how-to-make-a-html-page-in-a4-paper-size-pages */   
    height: 29.7cm;  
    position: relative;  
}
.bk-bar {  
    width: 100%;  

    bottom: 0;  
    left: 0;  
    right: 0;  
    display: block;  
    position: absolute;  
}

方案2. table ​

默认table的头部thead将自动携带到下一页,每页都出现。
可能存在的问题是: 最后一页的页脚不一定固定到最底下,页眉问题可以完美解决。

thead默认样式即 display:table-header-group
tfoot默认样式即 display:table-footer-group

测试代码1:

html
<table>  
  <thead style="display:table-header-group">  
  <tr>  
    <td>  
      重复头部  
    </td>  
  </tr>  
  </thead>  
  <tfoot style="display:table-footer-group">  
  <tr>  
    <td>  
      重复尾部  
    </td>  
  </tr>  
  </tfoot>  
  <tbody class="report-content">  
  <tr>  
    <td class="report-content-cell">  
      <div class="main">  
        <div>  
          。。。。很长的内容  
        </div>  
      </div>  
    </td>  
  </tr>  
  </tbody>  
</table>
<table>  
  <thead style="display:table-header-group">  
  <tr>  
    <td>  
      重复头部  
    </td>  
  </tr>  
  </thead>  
  <tfoot style="display:table-footer-group">  
  <tr>  
    <td>  
      重复尾部  
    </td>  
  </tr>  
  </tfoot>  
  <tbody class="report-content">  
  <tr>  
    <td class="report-content-cell">  
      <div class="main">  
        <div>  
          。。。。很长的内容  
        </div>  
      </div>  
    </td>  
  </tr>  
  </tbody>  
</table>

测试代码2:

html
<thead>  
<tr>  
  <th colspan="6">  
    <h2 class="center" style="font-size: 20px; font-weight: bold;">  
      报告表  
    </h2>  
    <div class="bold-org">  
      机构名称: {{ orgName }}  
    </div>  
  </th>  
</tr>  
<tr>  
  <th class="tg-0lax" style="width: 45px;">序号</th>  
  <th class="tg-0lax" style="width: 110px;">发现时间</th>  
  <th class="tg-0lax" style="width: 110px;">信息类别</th>  
  <th class="tg-0lax">内容</th>  
  <th class="tg-0lax" style="width: 110px;">报告时间</th>  
  <th class="tg-0lax" style="min-width: 110px;">报告人</th>  
</tr>  
</thead>
<thead>  
<tr>  
  <th colspan="6">  
    <h2 class="center" style="font-size: 20px; font-weight: bold;">  
      报告表  
    </h2>  
    <div class="bold-org">  
      机构名称: {{ orgName }}  
    </div>  
  </th>  
</tr>  
<tr>  
  <th class="tg-0lax" style="width: 45px;">序号</th>  
  <th class="tg-0lax" style="width: 110px;">发现时间</th>  
  <th class="tg-0lax" style="width: 110px;">信息类别</th>  
  <th class="tg-0lax">内容</th>  
  <th class="tg-0lax" style="width: 110px;">报告时间</th>  
  <th class="tg-0lax" style="min-width: 110px;">报告人</th>  
</tr>  
</thead>

方案3. fixed结合table ​

未进行详细测试, 理论没有问题

  1. 使用fixed布局，将页眉页脚固定
  2. 使用table布局，给header 、footer固定高度，防止重叠遮挡

参考:
css - How to use HTML to print header and footer on every printed page of a document? - Stack Overflow
window.print自定义页眉页脚 - 掘金

其他: td th的区别
td和th都是用来定义表格。
table是表格标签；
tr 是表格的行标签，每一组标签表示一行；内可以嵌套多个td和th
td指表格数据table data，即数据单元格内容，每一组标签表示一个单元格，嵌套于tr内；
th指表格表头table header，于数据单元格类似，每一组标签表示一个单元格，嵌套于tr内，区别在于th里的内容以粗体表示
————————————————
版权声明：本文为CSDN博主「gtuu0123」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/gtuu0123/article/details/4529152