Getting PDF export to look like our print preview

[mathias]

Hello there,

looking at PDF export. In our "reqular" printing, we have modified the PrintFrame.html and CSS to include a "header" with some customer-related info above the listgrid, which is only relevant when printing. So, our "print" handler looks like this:

reportGrid.getGroupTree().openAll();
if (headerAssembler != null) {
  Canvas.showPrintPreview(new Canvas[]{headerAssembler.assemblePrintHeader(), reportGrid});
} else {
  Canvas.showPrintPreview(reportGrid);
}

In my PDF export button i tried doing the same more or less:

reportGrid.getGroupTree().openAll();
Canvas[] pdf = new Canvas[]{headerAssembler.assemblePrintHeader(), reportGrid};
DSRequest requestProperties = new DSRequest();
requestProperties.setAttribute("skinName", "Enterprise");
requestProperties.setAttribute("pdfName", "export");
RPCManager.exportContent(pdf, requestProperties);

Now, it works fine, but the look and feel of the print preview is not applied. I tried moving all styles to skin_styles, to no effect.

So, i'm wondering, is there any way for me to make the PDF export look like the print preview? That would be swell.

(smartgwt pro 6.0)

[Isomorphic]

You would need to move all of your styling information to the skin_styles of Enterprise skin for this to work, *and* you'd have to adjust the various print-specific styles (for example, listGrid.printHeaderStyle).

If you think you've done all this, we don't have enough information yet to help (no server log or any information about the resulting HTML or PDF).

Note also that dsRequest.exportCSS is another way to inject styling when using exportContent().

[mathias]

Ah, thanks for you info, i think i might understand why it won't work. We have our custom skin, but i set the skinname attribute to "Enterprise".

However, i tried setting the skinname to our custom skin name, but that made no styles being applied at all. Is there something else i need to do in order for the PDF export to apply our custom skin?

EDIT: Our custom skin is just the Enterprise skin with some extra stuff added, so all the print-styling from Enterprise should be present.

[mathias]

After digging around in the docs, i found something in the RPCManager.exportContent javadoc - the "skin.XXX.location" should be set. When i did that, some stuff from my skin got applied.

It still doesn't look like our print preview (we have drop shading, rounded corners that won't display in the PDF for example), but now i have something i can continue to look at.

[mathias]

OK, so i'm continuing this thread rather than starting a new one, since it's the same topic.

I can get my skin to apply to the PDF, however it seems only some effects work. Case in point: a header with rounded corners and dropshadow. The CSS works in the print preview, but its effects are not applied in the PDF even though i can see other things from the CSS that are applied.

See the attached two screenshots to see how it looks in the preview and (not) looks in the PFF.


So, my question is: Is it possible to make my print preview look more or less the same, or are there limitations here that i'm not aware about? Do i need some specific jars in order to make this work?

Help is much appreciated.

below is is my css styles for the header "box", which works in the preview, but not the PDF:

.printHeaderBox {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 400px;
  font-size: 12px;
  text-align: left;
  bgcolor: #f2f4f4;
  background-color: #ffffff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 2px 7px 10px rgba(53, 50, 56, 0.46);
  -moz-box-shadow: 2px 7px 10px rgba(53, 50, 56, 0.46);
  box-shadow: 2px 7px 10px rgba(53, 50, 56, 0.46);
  border-style: solid;
  border-width: 1px;
  border-color: #013d4b;
  padding: 10px;
  margin-bottom: 10px;
}

[Isomorphic]

The mechanism here is that the print HTML is converted to PDF via a library called iText. iText has fairly limited CSS support (google iText CSS support for various resources and discussions).

If it's critical to have a very visually rich PDF output, a typical approach is to create a PDF template and then use a server-side library to merge data into that template. Here, lots of different tools and libraries exist, and we have no particular favorite to recommend.

[mathias]

Ah, thanks for the clarification! Will look into iText.