HTML 转 PDF 排雷 之 wkhtmltopdf 转换得到的PDF没有内容 |
您所在的位置：网站首页 › pdf打印出来是空白页怎么回事 › HTML 转 PDF 排雷 之 wkhtmltopdf 转换得到的PDF没有内容 |
|
问题描述
用浏览器打开正常，但使用工具 wkhtmltopdf 转换成 PDF 文档后却看不到任何内容。 html 代码如下： index --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的值发现以下规则： 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报告给作者吧。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |