HTML 转 PDF 排雷 之 wkhtmltopdf 转换得到的PDF没有内容

问题描述

用浏览器打开正常，但使用工具 wkhtmltopdf 转换成 PDF 文档后却看不到任何内容。

html 代码如下：

  



  --allow
  
  这个参数只在“页面对象”是一个文件时有效，在“页面对象”是一个url时此参数无效。
  
  这个参数的作用是为HTML页面中使用相对路径引用的文件指定一个加
  载文件的基目录。也就是说HTML文件中所有以相对路径指定的文件都
  会从 --allow 参数指定的目录进行加载。其实在HTML中指定 base 标签
  可以达到同样的目的。如果两者(--allow参数和base标签)都没有指定，
  则使用当前处理的HTML文件所在的目录作为基目录加载当前处理的HTML中相对路径指定的文件。

CSS 代码如下：

.main {
  position:absolute;
  top:0;
  left:0;
  overflow-y:auto;
  bottom:0;
  right:0
}

在浏览器中打开是正常的，但是用 wkhtmltopdf 转换成PDF文档后看到的是一片空白。

反复修改CSS代码中overflow-y的值发现以下规则：

1. overflow-y:auto 时PDF文档是空白
2. overflow-y:scroll 时PDF文档是空白
3. overflow-y:visible 时PDF文档正常了
4. overflow-y:hidden 时PDF文档空白
5. 以上四种情况下在浏览器中页面显示都是正常的

反复修改CSS代码中的position属性发现以下规则：

1. 不设计position时 PDF文档正常
2. position:static 时 PDF 文档正常
3. position:relative 时 PDF 文档正常
4. position:fixed 时 PDF 文档是空白
5. position:absolute 时 PDF 文档是空白
6. 以上五种情况下在浏览器中页面显示都是正常的

结论

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属性的值得到如下规则：

1. height:0px;时PDF文档空白
2. height:10px;时PDF文档显示出10px高度的内容，有滚动条
3. height:20px;时PDF文档显示出20px高度的内容，有滚动条
4. height:50px;时PDF文档显示正常
5. 以上四种情况在浏览器显示都与PDF文档相同

总结

wkhtmltopdf 对于overflow:auto 的处理是，把overflow的值当成scroll，如果再当元素的position为fixed或absolute且没有给元素设置高度时，就把元素的高度处理成0px；于是我就得到了问题描述中的那个空白的PDF文档。

解决办法是：

1. 要么把overflow的值设置成visible
2. 把position的值设置成static或relative
3. 给元素设置高度。
4. 把bottom:0;这部分代码去掉

总结之后

又做了几个实验，发现如下规则：

1. 把bottom属性去掉后PDF文档正常了
2. 保留bottom属性去掉top属性，得到空白的PDF文档
3. 把bottom属性和top属性都去掉，PDF文档正常

总之，这个bug与以下属性有关

  position:absolute;
  top:0;
  overflow-y:auto;

所以这个bug很复杂，还是在github上通过issues报告给作者吧。