wkhtmltopdf 网页转pdf换页时thead和tbody文本重叠问题

wkhtmltopdf使用版本0.12.6

本地调试方案:

本地windows下载插件,cmd命令转换本地的html模板文件(静态模版不涉及接口交互)

命令:

wkhtmltopdf --javascript-delay 3000 --enable-forms --debug-javascript 模版地址 导出地址

模板地址是本地服务的html模版地址(http://127.0.0.1:8080/example.html)

导出地址是本地某一储存盘的绝对地址(F:\export\example.pdf)

解决方案:

搜索了很多相关的文章,都是说通过以下代码解决

tr {
 page-break-inside: avoid;
}

我使用后却改善效果不大,并不能解决问题。

后来发现去掉表头能解决thead和tbody重叠的问题,因此在修改代码的时候,选择将thead标签注释,把表示表头的tr,th标签放置在tbody标签中。

<table>
        <tbody>
            <!-- thead表头内容 -->
            <tr>
                <th>列1</th>
                <th>列2</th>
                <th width="55px">列3</th>
                <th width="55px">列4</th>
                <th width="180px">列5</th>
                <th width="90px">列6</th>
                <th width="90px">列7</th>
            </tr>
            <!-- 你的代码 -->
        </tbody>
</table>

重试之后发现,在换页的时候遇到表格就不会再生成表头了,因此,也避免了表头文字重叠的问题。

希望对你们有所帮助。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值