Wkhtmltopdf:HTML 表格转换导致行未对齐
P粉064448449
P粉064448449 2024-03-30 12:55:53
[CSS3讨论组]

使用wkhtmltopdf转换html表格报告:




  


  
01/15/2023

Payment Ledger

11:23AM
Payment Date Payment For
01/23/2023 PAYMENT ON ACCOUNT
01/23/2023 PAYMENT ON ACCOUNT
01/23/2023 PAYMENT ON ACCOUNT
01/23/2023 PAYMENT ON ACCOUNT
01/23/2023 PAYMENT ON ACCOUNT
01/23/2023 PAYMENT ON ACCOUNT
01/23/2023 PAYMENT ON ACCOUNT
01/23/2023 PAYMENT ON ACCOUNT
01/23/2023 PAYMENT ON ACCOUNT
01/23/2023 PAYMENT ON ACCOUNT
01/23/2023 PAYMENT ON ACCOUNT
01/23/2023 PAYMENT ON ACCOUNT
01/23/2023 PAYMENT ON ACCOUNT
01/23/2023 PAYMENT ON ACCOUNT
01/23/2023 PAYMENT ON ACCOUNT

我知道这里有很多代码,但未对齐的地方有几行。它也不只在一行上——它是随机的。当 html 被放入浏览器中时显示正常,但它不会转换为打印版本。 我该怎么做才能纠正这个问题?谢谢

P粉064448449
P粉064448449

全部回复(1)
P粉614840363

添加更多行后,我可以重现该问题,这表明该问题确实相当难以预测。

但是,该问题似乎是由 border-collapse:collapse; css 属性引起的。删除它会使所有行具有相同的高度。

当然,这也会导致每个表格单元格周围出现白色边框,这可能是不希望的。

要使边框与单元格融为一体,解决方案是使用整个表格的背景图案(而不是单个单元格的 background-color 属性)为列着色。

在下面的代码中,我创建了一个内联 svg 图像,该图像由三个具有表格列宽度和颜色的矩形组成:

为了在转换过程中正确计算列宽,我需要将 dpi 设置调整为 130:

wkhtmltopdf --dpi 130 input.html output.pdf

HTML 代码:



  
01/15/2023

Payment Ledger

11:23AM
Payment Date Payment For
01/23/2023 PAYMENT ON ACCOUNT
01/23/2023 PAYMENT ON ACCOUNT

生成的 pdf 文件:

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号