css背景不工作时使用渲染插件转换模板为pdf [英] css background is not working when convert template into pdf using rendering plugin

问题描述

我使用渲染插件在grails中生成pdf。
我使用由css准备的背景颜色。代码在这里。

  #container #content #mainContent .block .backgroundStyle {
 
 background： ffffff; / *旧的浏览器* / 
 / * IE9 SVG，需要'过滤器'为'none'* / 
背景条件覆盖：网址（数据：图像/ SVG + XML; BASE64，PD94bWwgdmVyc2lvbj0iMS4wIiA / Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI + CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjEwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjQ2JSIgc3RvcC1jb2xvcj0iI2Y0OWNkNyIgc3RvcC1vcGFjaXR5PSIxIi8 + CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ + CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc +）; 
 background：-moz-linear-gradient（left，#ffffff 0％，#ffffff 10％，＃f49cd7 46％，#ffffff 100％）; / * FF3.6 + * / 
 background：-webkit-gradient（linear，left top，right top，color-stop（0％，#ffffff），color-stop（10％，#ffffff） - 停止（46％，＃f49cd7），停止（100％，#ffffff））; / * Chrome，Safari4 + * / 
 background：-webkit-linear-gradient（left，#ffffff 0％，#ffffff 10％，＃f49cd7 46％，#ffffff 100％）; / * Chrome10 +，Safari5.1 + * / 
 background：-o-linear-gradient（left，#ffffff 0％，#ffffff 10％，＃f49cd7 46％，#ffffff 100％）; / * Opera 11.10+ * / 
 background：-ms-linear-gradient（left，#ffffff 0％，#ffffff 10％，＃f49cd7 46％，#ffffff 100％）; / * IE10 + * / 
 background：linear-gradient（to right，#ffffff 0％，#ffffff 10％，＃f49cd7 46％，#ffffff 100％）; / * W3C * / 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃ffffff'，endColorstr ='＃ffffff'，GradientType = 1）; / * IE6-8 * / 
} 
  

它的工作正常，当我看到它在浏览器，但是当我生成pdf颜色不是渲染。

解决方案

渲染插件使用itext 2.1.0创建pdf。这是一个非常老的版本的itext（可能是最后一个开源），并不支持CSS3样式很好。查看此其他讨论使用Java生成PDF：使用iText，Apache PDFBox或FOP？的其他可用选项。 / p>

I am using rendering plugin to generate pdf in grails. I am using a background color which is prepared by css. code is here.

#container #content #mainContent .block .backgroundStyle {

    background: #ffffff; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ2JSIgc3RvcC1jb2xvcj0iI2Y0OWNkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 10%, #f49cd7 46%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(10%, #ffffff), color-stop(46%, #f49cd7), color-stop(100%, #ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #ffffff 0%, #ffffff 10%, #f49cd7 46%, #ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #ffffff 0%, #ffffff 10%, #f49cd7 46%, #ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #ffffff 0%, #ffffff 10%, #f49cd7 46%, #ffffff 100%); /* IE10+ */
    background: linear-gradient(to right, #ffffff 0%, #ffffff 10%, #f49cd7 46%, #ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1); /* IE6-8 */
}

it is in style tag. its working fine when I see it at browser but when I am generating pdf color is not render. where am I wrong.

解决方案

The rendering plugin uses itext 2.1.0 for creating the pdf. That is a very old version of itext (probably the last open source) and does not support CSS3 styles very well. Look at this other discussion PDF generation with Java: what to use iText, Apache PDFBox or FOP? for other available options.

这篇关于css背景不工作时使用渲染插件转换模板为pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！