讲师中心 微信公众号
AI工具推荐 视频效率加速

html如何兼容低版本转pdf_兼容转html为pdf法【思路】

雨伟小哥_3725

雨伟小哥_3725

发布时间:2026-01-17 19:21:02

|

1456人浏览过

|

来源于php中文网

原创

wkhtmltopdf低版本(如0.12.x)因基于旧Qt WebKit内核,不支持Flex/Grid/rem/@media print等现代CSS特性,需降级为table+内联样式、pt单位、绝对路径字体+--font-outline 1等兼容方案。

html如何兼容低版本转pdf_兼容转html为pdf法【思路】

PDF生成时CSS不生效,是因为wkhtmltopdf默认用Qt WebKit内核

低版本 wkhtmltopdf(如0.12.x)基于旧版Qt WebKit,不支持Flex、Grid、rem单位、@media print中部分属性,甚至会忽略 position: fixed。不是HTML写得不对,是渲染引擎根本没实现。

  • 优先确认你用的 wkhtmltopdf --version 输出版本;0.12.6以下基本不建议用于现代CSS
  • 避免用 display: grid 或 gap —— Qt WebKit 538(对应wkhtmltopdf 0.12.x)完全不识别
  • font-size: 1.2rem 在某些0.12.x中会被解析为 1.2px,改用 em 或绝对单位(pt 更稳)
  • 用 @media screen 和 @media print 分离样式时,低版本可能只认 @media print,建议统一用后者并禁用屏幕媒体查询干扰

table布局+内联style是低版本最稳的兜底方案

当必须兼容 wkhtmltopdf 0.12.4 或更老版本时,放弃语义化结构和外部CSS,直接用 <table> + 全内联 style 是最快落地的方案。

  • 所有宽度用 width: 200px 或 width: 30%,不用 max-width(不支持)
  • 边框统一用 border: 1px solid #000,避免 border-collapse: collapse 失效导致双线
  • 文字垂直居中靠 vertical-align: middle + line-height 匹配单元格高,别依赖 flex
  • 图片务必加 height 和 width 属性,否则低版本常渲染为空白或错位
<table style="width: 100%; border: 1px solid #000; border-collapse: collapse;">
  <tr>
    <td style="padding: 8px; border: 1px solid #000; width: 30%;">姓名</td>
    <td style="padding: 8px; border: 1px solid #000;"><span style="font-family: SimSun; font-size: 12pt;">张三</span></td>
  </tr>
</table>

header/footer在低版本里必须用--header-html参数注入

wkhtmltopdf 低版本不支持HTML内 @page 的 @top-center 等规则,页眉页脚只能通过命令行参数注入独立HTML片段,且该HTML不能含外部CSS或JS。

Windows 日历同步
Windows 日历同步

将提醒同步至 Windows/Outlook 日历。用户提及「提醒我」「设置提醒」「加到日历」「同步到日历」「日程」「calendar」「日历」时触发。支持Microsoft Graph API 设备代码流认证,无需 Web 服务器,直接写入用户 Outlook 日历。

下载
  • 页眉HTML里只允许内联样式,且不能用 % 单位(如 width: 100% 会失效),推荐固定像素宽
  • 变量如页码需用占位符:<div style="text-align:right">第 [page] 页,共 [toPage] 页</div>
  • 如果页眉内容超长换行错位,加 white-space: nowrap + overflow: hidden 控制
  • 注意:--header-spacing 10 才能让页眉和正文保持10px间距,漏掉这个参数会导致页眉压正文

字体嵌入失败?先检查TTF路径和--font-outline参数

低版本 wkhtmltopdf 对中文字体支持极弱,即使指定了 @font-face,也大概率回退到默认无衬线字体。真正起作用的是 --font-outline 参数强制轮廓渲染。

立即学习“前端免费学习笔记(深入)”;

  • 确保TTF文件路径是绝对路径,且wkhtmltopdf进程有读取权限(Docker里尤其注意挂载)
  • 中文必须用TrueType(.ttf),OpenType(.otf)在0.12.x中基本不可用
  • 启动命令里加上 --font-outline 1,这是激活字体轮廓的关键开关,缺了就显示方块
  • CSS中指定字体时,font-family 值必须和系统注册名一致(如Windows下用 "SimSun",Linux下用 "WenQuanYi Micro Hei"),不能只写文件名

容易被忽略的一点:生成PDF前,先用 wkhtmltopdf --version 和 wkhtmltopdf --fonts 确认字体列表是否包含你要的中文字体。没有就别折腾CSS了。

热门AI工具

更多
Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
C++ Qt图形开发
C++ Qt图形开发

本专题专注于 C++ Qt框架在图形界面开发中的应用,系统讲解窗口设计、信号与槽机制、界面布局、事件处理、数据库连接与跨平台打包等核心技能,通过多个桌面应用项目实战,帮助学员快速掌握 Qt 框架并独立完成跨平台GUI软件的开发。

4702

2025.08.15

C++桌面程序开发
C++桌面程序开发

本专题聚焦 C++ 在桌面端图形界面应用开发中的实战应用,系统讲解 Qt 框架的信号与槽机制、界面布局管理、事件响应、数据交互、样式美化与多窗口应用设计等核心知识。通过实战案例(如记事本应用、数据管理工具、系统监控面板),帮助学习者掌握 从UI设计到完整桌面软件开发的C++工程化能力。

1314

2025.10.23

C++ 图形界面开发基础(Qt方向)
C++ 图形界面开发基础(Qt方向)

本专题系统讲解 使用 C++ 与 Qt 进行图形界面(GUI)开发的核心技能,内容涵盖 Qt 项目结构、窗口组件、信号与槽机制、事件处理、布局管理、资源管理,以及跨平台编译与打包流程。通过多个小型桌面应用实战案例,帮助学习者掌握从界面设计到功能实现的完整 GUI 开发能力。

1421

2025.12.05

python中print函数的用法
python中print函数的用法

python中print函数的语法是“print(value1, value2, ..., sep=' ', end=' ', file=sys.stdout, flush=False)”。本专题为大家提供print相关的文章、下载、课程内容,供大家免费下载体验。

2800

2023.09.27

python print用法与作用
python print用法与作用

本专题整合了python print的用法、作用、函数功能相关内容,阅读专题下面的文章了解更多详细教程。

249

2026.02.03

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4256

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1315

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1718

2023.08.03

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

0

2026.10.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 5.9万人学习

CSS教程
CSS教程

共754课时 | 97.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn