飞道科技

飞道科技文档总汇

pdf导出/预览样式错乱问题

现象

在导出/预览pdf时,样式是错乱的,而查看对应的html页面时样式又是正常的

解决办法

在页面中加入以下代码指定字体即可。

<style type="text/css">
body,html{
	font-family: WenQuanYi Zen Hei !important;
}
</style>

问题分析

在使用pdf导出/预览时,实际上是这样工作的:

  1. 在服务器端渲染页面,有时候还需要使用数据库中的数据(实际上经常是这样)
  2. 在服务器上将渲染好的页面装载进一个浏览器(当然是无界面的),然后在这个浏览器中将其样式解析并渲染,相当于我们在浏览器中看到的样子,只不过它是在服务器上一个我们看不到的浏览器中展示的而已。
  3. 将渲染好的页面转换成pdf文件,这里面就包含有各种解析好的样式以及一些绘制好的图片等。
  4. 通过浏览器展示(预览时)或弹出下载框下载到用户本地磁盘。

所以,在进行pdf导出/预览时,必须注意以下几点:

  1. pdf导出/预览的页面只能写服务端渲染
  2. 所有样式/图片引用时必须添加使用inline属性
  3. 必须指定字体,而且必须服务器上有的字体,目前服务器上只有两种字体:文泉驿正黑(WenQuanYi Zen Hei)和DejaVu(dejavu sans mono),其中,前一种字体主要用来显示中文,后一种则是英文字体。