window.print()之去除页脚的线

一、问题描述：

• 前端打印，有很多页，每页都需要页眉和页脚
• 所以使用table布局
  • table中的thead包裹的默认是页眉，（每页都会有）
  • table中的tfoot包裹的默认是页脚，（每页都有）
  • 如果给td或者th加上表格线，那么页脚自动会有线
    • 就算写了样式也会有
    • 之前我写了 tfoot td {border:none}，样式是绝对读到了的

二 解决办法

• 不在td上写表格线，需要表格线的地方加了一层div
• 这样文字多了线就对不齐，所以需要写js改变div的高度

<table id="tableExcel" class="tableprint">
  <thead>
    <tr>
        <td colspan="6">{{fymc}}移交清册表</td>
    </tr>
    <tr class="fd-table-header">
        <td style="font-size: 20px; width: 10%">
            <div>顺序号</div>
        </td>
        <td style="font-size: 20px; width: 20%">
            <div>文件编号</div>
        </td>
    </tr>
  </thead>
  <tfoot>
    <tr>
        <td colspan="2">移交人：</td>
        <td colspan="2">接收人：</td>
        <td colspan="2">日期：</td>
    </tr>
  </tfoot>
  <tbody>
  <tr class="fd-table-body"
      v-for="(item,index) in tableData"
      :key="index">
      <td style="font-size: 15px; width: 10%">
          <div>{{item.CSxh}}</div>
      </td>
      <td style="font-size: 15px; width: 20%">
          <div>{{item.CWjbh}}</div>
      </td>
  </tr>
  </tbody>
</table>

// 因为是把边框写到div上了，所以要把高度修改一下
this.$nextTick(()=>{
    const tr = document.getElementsByClassName("fd-table-body");
    if(tr.length){
        for (let index = 0; index < tr.length; index++) {
            const element = tr[index];
            if(element.offsetHeight > 41){
                const div = element.getElementsByTagName("div");
                for (let i = 0; i < div.length; i++) {
                    const divItem = div[i];
                    divItem.style.height= element.offsetHeight+"px";
                }
            }
        }
    }
})

• 又一个问题
  • 去除下面网页链接

@page {
   size: auto;
   // 上右下左的间距
   margin: 12mm 12mm 0 12mm;
}

解决方法二

针对页脚自动有线的问题，只要不给td的bottom加线，页脚就不会有线；所以修改为：

.tableprint{
   position: relative;
   text-align:center;
   word-break:break-all;
   margin: 0;
   padding: 50px;
}
.tableprint::after {// 重要
   position: absolute;
   content: "";
   border-top: 1px solid #ccc;
   bottom: 40px;
   left: 0;
   right: 0;
}
.tableprint td {
   border: 1px solid #ccc;
   border-bottom: none; // 重要
   box-sizing: border-box;
   border-collapse: collapse;
   line-height: 40px;
   vertical-align: top;
}

如果有更好的解决办法希望分享一下，谢谢~~~~