Flying Saucer ignoring CSS

4,467 views
Skip to first unread message

mjfan80

unread,
Apr 1, 2011, 6:09:00 AM4/1/11
to Flying Saucer Users
Hi to all
I'm using Flying Saucer, via the grails pdf plugin
i don't know why, because in the last days i did many thing about how
i use css and i tried to update the pdf plugin of grails (that use
Flying Saucer), but now Flying Saucer is ignoring CSS
Both css embedded and linked, and i really don't know why

here the code of the service of the plugin:

byte[] buildPdfFromFile(url) {

ByteArrayOutputStream baos = new ByteArrayOutputStream();

ITextRenderer renderer = new ITextRenderer();
try {
renderer.setDocument(url);
renderer.layout();
renderer.createPDF(baos);
byte[] b = baos.toByteArray();
return b
}
catch (Throwable e) {
log.error e
}
}



here how I call it

def baseUri = request.scheme + "://" + request.serverName + ":" +
request.serverPort + grailsAttributes.getApplicationUri(request)
def tmpDirectory = System.getenv("TMP")
def urlFile = tmpDirectory + File.separator + params.id + ".html"
def fileName = params.filename ?: params.id + ".pdf"
String testo = new File(urlFile).text
byte[] b
b = pdfService.buildPdfFromString(testo, baseUri)
response.setContentType("application/pdf")
response.setHeader("Content-disposition", "attachment; filename=" +
fileName)
response.setContentLength(b.length)
response.getOutputStream().write(b)


in the urlFile there will be a HTML file like this one (I tried also
with embedded and liked css) but the css is totally ignored... i can
see images (so the base uri is correct) but no the css... i tryed also
with absolute url (for the liked css) but nothing
can someone help?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Elenca Chiamate</title>
<style type="text/css">body{color:red;font-size:29px;}</style>
</head>
<body>
<a href="/HelpDeskGwt/report/creaPdfDaIdReport/
chiamata_reportElencaChiamate_010420111136_60">Crea e stampa Pdf <img
border="0" src="/HelpDeskGwt/images/pdf_button.png" alt="stampa come
pdf"/></a> || Altre opzioni
<div class="header once">
<div>
<div class="titolo_report">Report Chiamate Manutenzione Preventiva</
div>
<div class="logo"><img class="img_logo" src="/HelpDeskGwt/images/
logo_gestore_120X100.gif" alt="logo"/></div>
<div class="az">
<Strong>Provincia di Varese - Lotto N&#176; 2 (MANUTENCOOP)</
Strong><br/>
<SPAN>Via dei Tigli 10</SPAN><br/>
<SPAN> GALLARATE (VA)</SPAN><br/>

<SPAN>tel 0331 793610 - fax 0331 791652</SPAN><br/>
<SPAN>P.IVA - C.F.: </SPAN>
</div>
</div>
</div>
<div class="header other">
<div>
<div class="titolo_report">Report Chiamate Manutenzione Preventiva</
div>
<div class="logo"><img class="img_logo" src="/HelpDeskGwt/images/
logo_gestore_50X40.gif" alt="logo"/></div>

<div class="az">
<Strong>Provincia di Varese - Lotto N&#176; 2 (MANUTENCOOP)</
Strong><br/>
<SPAN>Via dei Tigli 10</SPAN><br/>
<SPAN> GALLARATE (VA)</SPAN><br/>
<SPAN>tel 0331 793610 - fax 0331 791652</SPAN><br/>

<SPAN>P.IVA - C.F.: </SPAN>
</div>
</div>
</div>
</body>
</html>

Peter Brant

unread,
Apr 1, 2011, 6:38:51 AM4/1/11
to flying-sa...@googlegroups.com
You could try turning on FS logging (XRLog.setLoggingEnable(true) from
Java or via the xr.util-logging.loggingEnable system property). The
symptoms you describe are normally the result of using the wrong UA
plugin, but that doesn't look to be the case here.

Pete

mjfan80

unread,
Apr 1, 2011, 6:42:04 AM4/1/11
to Flying Saucer Users
Where i should put this code?

mjfan80

unread,
Apr 1, 2011, 8:27:05 AM4/1/11
to Flying Saucer Users
I try enabling the loggin this is what i get if i have no css inside

XRLog.isLoggingEnabled()true
org.xhtmlrenderer.render INFO:: Using CSS implementation from:
org.xhtmlrenderer.context.StyleReference
org.xhtmlrenderer.load INFO:: SAX XMLReader in use (parser):
com.sun.org.apache.xerces.internal.parsers.SAXParser
org.xhtmlrenderer.load INFO:: Loaded document in ~15ms
org.xhtmlrenderer.load INFO:: TIME: parse stylesheets 0ms
org.xhtmlrenderer.match INFO:: media = print
org.xhtmlrenderer.match INFO:: Matcher created with 118 selectors
org.xhtmlrenderer.load INFO:: Could not read /HelpDeskGwt/images/
pdf_button.png as a URL; may be relative. Testing using parent URL
http://localhost:8080/HelpDeskGwt
org.xhtmlrenderer.load INFO:: Could not read /HelpDeskGwt/images/
logo_gestore_120X100.gif as a URL; may be relative. Testing using
parent URL http://localhost:8080/HelpDeskGwt
org.xhtmlrenderer.load INFO:: Could not read /HelpDeskGwt/images/
logo_gestore_50X40.gif as a URL; may be relative. Testing using parent
URL http://localhost:8080/HelpDeskGwt


so 0ms for styleshert parsing and this is ok, i have no css



if in the html file i have
<style type="text/css">body{color:red;font-size:29px;}</style>
i get similar output (0ms for css parsing)

if i try more css, linked, like this
<link rel="stylesheet" type="text/css" href="$
{resource(base:Utility.getCssPath(), file: 'main.css')}" media="all"/>
<link rel="stylesheet" type="text/css" href="$
{resource(base:Utility.getCssPath(), file: 'main_stampa.css')}"
media="print"/>
<link rel="stylesheet" type="text/css" href="$
{resource(base:Utility.getCssPath(), file: 'main_screen.css')}"
media="screen"/>
<link rel="stylesheet" type="text/css" href="$
{resource(base:Utility.getCssPath(), file: 'landscape.css')}"
media="print"/>
i get the same output, always 0ms for css parsing

why?

mjfan80

unread,
Apr 1, 2011, 8:39:20 AM4/1/11
to Flying Saucer Users
I tried clening cache (browser and server) and now, with some more css
linked, i get
org.xhtmlrenderer.load INFO:: TIME: parse stylesheets 79ms
but the pdf is like without css... :-(

On Apr 1, 2:27 pm, mjfan80 <mjfa...@gmail.com> wrote:
> I try enabling the loggin this is what i get if i have no css inside
>
> XRLog.isLoggingEnabled()true
> org.xhtmlrenderer.render INFO:: Using CSS implementation from:
> org.xhtmlrenderer.context.StyleReference
> org.xhtmlrenderer.load INFO:: SAX XMLReader in use (parser):
> com.sun.org.apache.xerces.internal.parsers.SAXParser
> org.xhtmlrenderer.load INFO:: Loaded document in ~15ms
> org.xhtmlrenderer.load INFO:: TIME: parse stylesheets  0ms
> org.xhtmlrenderer.match INFO:: media = print
> org.xhtmlrenderer.match INFO:: Matcher created with 118 selectors
> org.xhtmlrenderer.load INFO:: Could not read /HelpDeskGwt/images/
> pdf_button.png as a URL; may be relative. Testing using parent URLhttp://localhost:8080/HelpDeskGwt
> org.xhtmlrenderer.load INFO:: Could not read /HelpDeskGwt/images/
> logo_gestore_120X100.gif as a URL; may be relative. Testing using
> parent URLhttp://localhost:8080/HelpDeskGwt
> org.xhtmlrenderer.load INFO:: Could not read /HelpDeskGwt/images/
> logo_gestore_50X40.gif as a URL; may be relative. Testing using parent
> URLhttp://localhost:8080/HelpDeskGwt

Peter Brant

unread,
Apr 1, 2011, 9:53:59 AM4/1/11
to flying-sa...@googlegroups.com
Make sure you're setting media="all" or media="print" on your <style> tag.

Pete

Gabriele Prandini

unread,
Apr 1, 2011, 10:13:22 AM4/1/11
to flying-sa...@googlegroups.com, Peter Brant
if you see the html code my stylesheet (at least the ones i need) are
media all or media print

<link rel="stylesheet" type="text/css" href="$
{resource(base:Utility.getCssPath(), file: 'main.css')}" media="all"/>
<link rel="stylesheet" type="text/css" href="$
{resource(base:Utility.getCssPath(), file: 'main_stampa.css')}"
media="print"/>
<link rel="stylesheet" type="text/css" href="$
{resource(base:Utility.getCssPath(), file: 'main_screen.css')}"
media="screen"/>
<link rel="stylesheet" type="text/css" href="$
{resource(base:Utility.getCssPath(), file: 'landscape.css')}"
media="print"/>

2011/4/1 Peter Brant <peter...@gmail.com>:

mjfan80

unread,
Apr 5, 2011, 10:29:35 AM4/5/11
to Flying Saucer Users
Just found the problem... it was bauce the html page was without the
"doctype"
argh...
now is working...

but is not work the
table{
border-collapse:collapse;
}

the border collapse id working good in the browser... but the boarder
are not collapsed in the pdf (and the border collapse properties is a
css with media type print AND media type screen)

On Apr 1, 4:13 pm, Gabriele Prandini <mjfa...@gmail.com> wrote:
> if you see the html code my stylesheet (at least the ones i need) are
> media all or media print
> <link rel="stylesheet" type="text/css" href="$
> {resource(base:Utility.getCssPath(), file: 'main.css')}" media="all"/>
>        <link rel="stylesheet" type="text/css" href="$
> {resource(base:Utility.getCssPath(), file: 'main_stampa.css')}"
> media="print"/>
>        <link rel="stylesheet" type="text/css" href="$
> {resource(base:Utility.getCssPath(), file: 'main_screen.css')}"
> media="screen"/>
>        <link rel="stylesheet" type="text/css" href="$
> {resource(base:Utility.getCssPath(), file: 'landscape.css')}"
> media="print"/>
>
> 2011/4/1 Peter Brant <peter.br...@gmail.com>:
>
>
>
>
>
>
>
> > Make sure you're setting media="all" or media="print" on your <style> tag.
>
> > Pete
>

Peter Brant

unread,
Apr 5, 2011, 10:33:09 AM4/5/11
to flying-sa...@googlegroups.com
border-collapse: collapse isn't supported with -fs-table-paginate:
paginate. Is that the problem?

Pete

mjfan80

unread,
Apr 5, 2011, 11:00:23 AM4/5/11
to Flying Saucer Users
yes, this is the problem
argh
i need both of them...
there is a workaround?

thanks for everything

Peter Brant

unread,
Apr 6, 2011, 6:09:47 AM4/6/11
to flying-sa...@googlegroups.com
Not really, I'm afraid. :-( The closest to a workaround is probably
to set border-spacing to zero and halve the relevant border-width
settings.

Pete

Reply all
Reply to author
Forward
0 new messages