关于table表格打印：colspan不生效、局部打印等问题总结

一、table设置了colspan属性，但打印时依旧宽度自适应的问题

问题描述：

上图：
页面上显示的：

打印预览显示的：

很明显，打印时根据宽度自己撑开了单元格，并且把长度较小的挤扁了
这时我的代码是这样的：

<tr style="height: 45px">
            <td colspan="2">时间</td>
            <td colspan="3">{{tableData.meetigTime}}</td>
            <td colspan="2">地点</td>
            <td colspan="3" style="word-wrap:break-word;">{{tableData.meetingAddress}}</td>
            <td colspan="2">参加人数</td>
            <td colspan="2">{{tableData.number}}</td>
          </tr>
          <tr style="height: 45px">
            <td colspan="2" style="word-wrap:break-word;">会议（活动）名称</td>
            <td colspan="5" >{{tableData.meetingTheme}}</td>
            <td colspan="3" >主持人</td>
            <td colspan="4" >（电子签名）</td>
          </tr>
          <tr style="height: 45px">
            <td colspan="14">会议（活动）主要内容</td>
          </tr>

在网上大量搜索之后，在html文档中看到了这个，‘%’ ：

通过设置百分比宽度，就完美解决了这个问题
（当然，会有不能整除的问题，你只需在最后一项中加上1%或者更多的一点点，就可以凑足100%了）：

<tr style="height: 45px">
            <td colspan="2" width="14%">时间</td>
            <td colspan="3" width="21%">{{tableData.meetigTime}}</td>
            <td colspan="2" width="14%">地点</td>
            <td colspan="3" width="21%" style="word-wrap:break-word;">{{tableData.meetingAddress}}</td>
            <td colspan="2" width="14%">参加人数</td>
            <td colspan="2" width="15%">{{tableData.number}}</td>
          </tr>
          <tr style="height: 45px">
            <td colspan="2" width="14%" style="word-wrap:break-word;">会议（活动）名称</td>
            <td colspan="5" width="35%">{{tableData.meetingTheme}}</td>
            <td colspan="3" width="21%">主持人</td>
            <td colspan="4" width="29%">（电子签名）</td>
          </tr>
          <tr style="height: 45px">
            <td colspan="14">会议（活动）主要内容</td>
          </tr>

再次点击打印的预览结果如图：

耶耶耶耶耶耶耶～～～～

二、如何局部打印的问题

只想打印这一个表格，就需要局部打印，排除不需要的页面部分
参考了一篇博文：https://blog.csdn.net/qq_39324871/article/details/88883432
采用了其中推荐的 iframe 打印

HTML部分：

1. 给要打印的部分一个id

我要打印 #print 这部分

2. 一个空的 iframe 标签

js 部分

获取dom这些就没什么好解释的了：

print() {
        if (confirm('确定打印吗？')) {
          var p = document.getElementById('print').innerHTML
          var f = document.getElementById('printFrame')
          f.contentDocument.write(p)
          f.contentDocument.close()
          f.contentWindow.print()
        }
      }

附加一个vue获取dom的方法：

感谢大佬们写的博客，让我学到很多
这篇文章写得非常清楚：
https://www.cnblogs.com/Double-Zhang/p/7891664.html