前言：

上一個項目，主要是和客戶直接溝通，然后客戶有一些想法，因為是定制的OA系統，系統打印清單也比較多。然后總結了一些前端打印方面的小技巧。

上圖是最開始打印出來的效果，明顯看到分頁之后，兩張表之間有明顯的瑕疵，以至于后來我客戶跟我說像是被狗啃了似的。然后我查詢了相關css的資料，對于打印分頁的一些解決方案。

1. 有的意見是前端分頁計算，然后在一定位置強制加一個p標簽進行分頁，在要打印強行分頁的地方加上:<P class=normal style="page-break-before: always"> </P>，這種的話確實不好計算，萬一某一行的內容被撐起來了，一頁的高度也不確定了。
2. 然后就是我自己找到的一個css屬性。如下：

page-break-inside 屬性用于設置是否在指定元素中插入分頁符。
注意： 您不能對絕對定位的元素使用此屬性。
注意： 請盡可能少地使用分頁屬性，并且避免在表格、浮動元素、帶有邊框的塊元素中使用分頁屬性。

auto：默認。如果必要則在元素內部插入分頁符。
avoid：避免在元素內部插入分頁符。
inherit：規定應該從父元素繼承 page-break-inside 屬性的設置。

然后我在指定的tr元素加入了分頁符，確實也達到了預期想要的效果，table打印被截斷的問題就算是解決了。

        tr {
            page-break-inside: avoid;
        }

后來客戶又提了一個需求，第二頁能不能也有表頭信息，因為只有第一頁有表頭信息，從后面開始就不清楚看的哪一列信息了。我一直以為table里面的thead是沒有什么用的，只是一個標簽語義化的意思，但是在需要用到打印table的時候，使用起來很方便。

    <table cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>班級</th>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
              內容
        </tbody>
  </table>

總結：加入thead標簽之后，table截取的問題也會解決了，還是要看項目中的實際需求，如果客戶不需要分頁表頭，就使用page-break-inside，美化打印樣式使用。
拓展：在這次項目中，我是直接手寫table，沒有使用el-table、a-table，雖然兩者里面都有包裹thead標簽，但是el-table為了實現表頭浮動，他把表頭信息與內容信息是分為兩個div來寫的，el-table在打印的時候不能讓每一頁都含有表頭，就需要在適當的時候操作dom節點了，在內容的div里面添加表頭信息。

<el-table
  :data="data"
  ref="table"
>
</el-table>


<script>
export default {
  mounted(){
    this.$nextTick(() => {
        //獲取el-table的thead dom節點
        let thead = this.$refs.table.$el.querySelector('.el-table__header-wrapper thead');
        //追加到el-table的內容里去
        this.$refs.table.$el.querySelector('.el-table__body-wrapper table').appendChild(thead)
    })
  }
}
</script>
<style>
    /* 隱藏咱們dom操作添加的節點，不影響el-table原功能 */
    .el-table .el-table__body-wrapper table thead{
        display:none;
    }
    /* 在打印的時候隱藏el-table的表頭，開放咱們dom操作添加的節點 */
    @media print{
        .el-table .el-table__header-wrapper{
            display:none;
        }
        .el-table .el-table__body-wrapper table thead{
            display:table-header-group;
        }
    }
</style>

以上是vue2的寫法，vue3使用ref屬性，然后在setup里聲明變量接著就行了，不用$ref。