js调用打印机多页时导致table被截断(vue-print-nb)

1 环境

  • vue: 2.6.10
  • vue-print-nb:1.5.0

2 问题

前端调用打印机打印时,页面table太长了被截断了,截断的还不规则,例如下图:
js调用打印机多页时导致table被截断(vue-print-nb)_第1张图片
这样打印出来的会很丑,而且分页打印的时候没有表头,阅读起来不是很方便。

3 解决

使用 thead、tbody两个标签解决,使用thead标签包裹表头,使用tbody标签包裹表体,例如下图

<table>
  <thead>
    <tr>
      <th>Cityth>
      <th>Populationth>
  thead>
  <tbody>
    <tr>
      <td>Sydneytd>
      <td>4.627 million (2018)td>
    tr>
  tbody>
table>

效果如下图
js调用打印机多页时导致table被截断(vue-print-nb)_第2张图片

该教程参考:Print CSS basics in 10 minutes

你可能感兴趣的:(vue)