关于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

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

Reika_Liu

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值