vue结合print-js实现打印html模板的功能，如何固定头部和尾部，中间内容部分自动分页且不覆盖头和尾

Question

vue项目，使用print-js，实现打印html模板的功能，html模板分为头部，内容，尾部，中间内容部分根据数据量的大小动态显示。我想实现打印时，每一页都有头部和尾部，中间内容部分自动分页并且不覆盖每一页的头部和尾部，求问如何实现？
我现在的头部和尾部使用的是fixed定位，尝试给中间内容部分加margin或padding，上边距能生效，下边距无效，可能是因为自动分页，并没有到下边距部分，所以无效，求解！！怎么解决这个问题！！

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

根据你的描述，你需要将头部和尾部固定在每一页的顶部和底部，而中间的内容部分根据数据量自动分页且不覆盖头部和尾部。这个问题可以通过CSS的页面布局和print-js的配置来解决。以下是一种可能的解决方案：

首先，确保你的头部和尾部使用了固定定位（fixed positioning），这样它们就会始终显示在页面顶部和底部，无论页面内容如何滚动。对于中间的内容部分，你可以使用CSS的page-break-after或page-break-before属性来控制分页。这些属性告诉浏览器在哪里进行分页。

然后，你可以使用print-js的配置选项来控制打印的细节。特别是header和footer选项，你可以在这两个选项中指定头部和尾部的HTML元素或内容。对于中间内容的分页问题，print-js本身并没有直接的选项可以设置分页位置，但是你可以通过在内容部分的HTML中插入适当的分页标记来控制分页。例如，你可以在适当的位置插入<div style="page-break-after: always;"></div>来强制分页。同时确保打印设置允许内容的分页。

在你的案例中，假设你的HTML模板是这样的结构：

<div id="header">...</div> <!-- 头部 -->
<div id="content">...</div> <!-- 内容部分 -->
<div id="footer">...</div> <!-- 尾部 -->

你可以在内容部分的合适位置插入分页标记，并设置打印样式使得头部和尾部在每一页都会显示：

<div id="header" style="position: fixed; top: 0;">...</div> <!-- 头部 -->
<div id="content">
  <!-- 内容部分 -->
  <!-- 在适当的位置插入分页标记 -->
  <div style="page-break-after: always;"></div>
</div>
<div id="footer" style="position: fixed; bottom: 0;">...</div> <!-- 尾部 -->

然后，使用print-js进行打印时，设置头部和尾部：

printJS({
  printable: 'your-printable-element', // 你的打印元素选择器或HTML内容
  header: '#header', // 头部元素选择器或HTML内容
  footer: '#footer', // 尾部元素选择器或HTML内容
  // 其他配置选项...
});

这样设置后，打印时每一页都会包含头部和尾部，中间内容部分会根据数据量自动分页。希望这个解决方案对你有所帮助！