问题描述
用浏览器打开正常，但使用工具 wkhtmltopdf 转换成 PDF 文档后却看不到任何内容。
html 代码如下：
<!DOCTYPE HTML>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="gitbook/style.css">
</head>
<body>
<div class="main">
--allow
这个参数只在“页面对象”是一个文件时有效，在“页面对象”是一个url时此参数无效。
这个参数的作用是为HTML页面中使用相对路径引用的文件指定一个加
载文件的基目录。也就是说HTML文件中所有以相对路径指定的文件都
会从 --allow 参数指定的目录进行加载。其实在HTML中指定 base 标签
可以达到同样的目的。如果两者(--allow参数和base标签)都没有指定，
则使用当前处理的HTML文件所在的目录作为基目录加载当前处理的HTML中相对路径指定的文件。
</div>
</body>
</html>
CSS 代码如下：
.main {
position:absolute;
top:0;
left:0;
overflow-y:auto;
bottom:0;
right:0
}
在浏览器中打开是正常的，但是用 wkhtmltopdf 转换成PDF文档后看到的是一片空白。
反复修改CSS代码中overflow-y的值发现以下规则：
- overflow-y:auto 时PDF文档是空白
- overflow-y:scroll 时PDF文档是空白
- overflow-y:visible 时PDF文档正常了
- overflow-y:hidden 时PDF文档空白
- 以上四种情况下在浏览器中页面显示都是正常的
反复修改CSS代码中的position属性发现以下规则：
- 不设计position时 PDF文档正常
- position:static 时 PDF 文档正常
- position:relative 时 PDF 文档正常
- position:fixed 时 PDF 文档是空白
- position:absolute 时 PDF 文档是空白
- 以上五种情况下在浏览器中页面显示都是正常的
结论
wkhtmltopdf 工具中对 HTML中的元素渲染时，如果元素的CSS属性position的值是fixed或absolute时，是不给元素高度的；也就是如果一个元素的CSS属性position的值为absolute，并且不给这个元素设置高度时，wkhtmltopdf会把这个元素的高设置为0px；
验证
对CSS代码加一个高度属性，得到如下代码
.main {
position:absolute;
top:0;
left:0;
overflow-y:auto;
bottom:0;
right:0;
height: 100px;
}
改成上述CSS代码后生成的PDF文档显示正常。
返得修改height属性的值得到如下规则：
- height:0px;时PDF文档空白
- height:10px;时PDF文档显示出10px高度的内容，有滚动条
- height:20px;时PDF文档显示出20px高度的内容，有滚动条
- height:50px;时PDF文档显示正常
- 以上四种情况在浏览器显示都与PDF文档相同
总结
wkhtmltopdf 对于overflow:auto 的处理是，把overflow的值当成scroll，如果再当元素的position为fixed或absolute且没有给元素设置高度时，就把元素的高度处理成0px；于是我就得到了问题描述中的那个空白的PDF文档。
解决办法是：
- 要么把overflow的值设置成visible
- 把position的值设置成static或relative
- 给元素设置高度。
- 把bottom:0;这部分代码去掉
总结之后
又做了几个实验，发现如下规则：
- 把bottom属性去掉后PDF文档正常了
- 保留bottom属性去掉top属性，得到空白的PDF文档
- 把bottom属性和top属性都去掉，PDF文档正常
总之，这个bug与以下属性有关
position:absolute;
top:0;
overflow-y:auto;
所以这个bug很复杂，还是在github上通过issues报告给作者吧。
网友评论