admin管理员组

文章数量:1630202

itext2.0.8 将 HTML 转换成 PDF, 完美 CSS, 带图片, 自动分页

之前用 itext7 将 html 导出为 PDF, 比较方便, 代码较少, 而且支持 base64 的图片. 但是 itext7 是收费的, 所以换成了 xhtmlrenderer.

xhtmlrenderer 自带 itext2.0.8, 而且不能再引入其他版本的 itext, 因为 itext2.0.8 是已经被废弃的, 里面的很多方法在新版本已经没有了.

itext 导出 PDF 最重要的 2 个难点:

1.CSS 样式

2. 中文不显示

2. 图片 (itext7 支持比较好, 不过要收费)

一, 首先引入包

只需要这个就够了, 它会自动引入 itext2.0.8

org.xhtmlrenderer

core-renderer

R8

二, 页面 CSS 样式的采集

看过很多篇 itext 的文章, 都没有达到想象中要求. 大多是说将 CSS 路径改为绝对路径, 或者将 CSS 写在页面中, 这都不现实. 真正的项目中, 你的项目经理是不会让你这么做的.

所以我找到一个能将页面所有 CSS 采集起来的 JS 方法. 传入你的标签的 id, 返回一个包含该 id 的区域的所有 CSS 样式 + 页面元素, 加上 HTML,head 和 body 标签, 组成一个 HTML 的字符串. 将字符串传给后台去生成 PDF. 值得注意的是我加了这个字体 body{font-family: SimSun;}, 这个字符是中文字体, 后端必须与前端一致. 且看后面.functiongetElementChildrenAndStyles(selector){

varHTML=$(selector).prop("outerHTML");

selector=selector.split(",").map(function(subselector){

returnsubselector+","+subselector+"*";

}).join(",");

elts=$(selector);

varrulesUsed=[];

// 文档的所有样式表

sheets=document.styleSheets;

for(varc=0;c

// rules 和 cssRules 的计数方法也是不一样的! rules 是第几个选择器; cssRules 是第几条规则,

// 分别用于 IE7 和 Chrome

varrules=sheets[c].rules||sheets[c].cssRules;

for(varr=0;r

//selectorText: $ 节点

varselectorText=rules[r].selectorText;

varmatchedElts=$(selectorText);

// 找到 dom 节点里所有节点, 并将其 push 到数组里

for(vari=0;i

if(matchedElts.index(elts[i])!=-1){

rulesUsed.push(rules[r]);break;

}

}

}

}

// 重组 style

varstyle=rulesUsed.map(function(cssRule){

if(cssRule.style){

varcssText=cssRule.selecto

本文标签: 图片分页转换成完美html