Having issues to print UI Pages with images

felipe_barbosa · ‎04-16-2015

I am currently working in a ServiceNow feature to print a customized report I built with Jelly in a UI Page, but using basically HTML to display data, pretty sure this is not really related to service now as if I print a service now page, my company logo goes in the printing, I think this is more related to HTML or such.

I have a div, a table with tr and td, and inside one of the td's I have an image.

When I use the browser ´s print method, the image doesn ´t get rendered in the preview, neither in the printed document.

The strange part is, if I select the whole page and use the print again, then I have the image on the preview and on the printed document.

One thing I noticed is that the footer of the printed page of the first trial I have something like this:

https://gfttest.service now.com/pdf_generator_mock_ui_page.do

(Basically the URL to the ui page)

On the other hand, when I select the content in the page and hit print, I have this information on the footer:

data:text/htmlÍ¾charset=utf 8,%3Ctable%20name%3D%22mainTable%22%20width%3D%22535%22%20style%3D%22font size%3A%2013.333333015441...

This is my HTML in summary:

<html> <div> <table name="mainTable" width="535"> <tr> <td colspan = "4" align="center"> <img id="report_logo" src="a465f5072187b1009dd0b3f4a30c63f1.iix"></img> </td> </tr> ... </table> </div> </html>

Any help would be trully appreciated.

Best regards,

Felipe

felipe_barbosa · ‎04-16-2015

In order to force the image to appear on the browser ´s print preview and in the actual print page, you should have this style inside the <img> tag:

style="visibility: visible; display: block;"

With this you ensure the image you want to be rendered in the print area will work correctly.

View solution in original post

felipe_barbosa · ‎04-16-2015

In order to force the image to appear on the browser ´s print preview and in the actual print page, you should have this style inside the <img> tag:

style="visibility: visible; display: block;"

With this you ensure the image you want to be rendered in the print area will work correctly.

Reghuram · ‎09-02-2015

Hi Felipe.. similar situation. Created a UI page with jelly need to get it printed.. what option you used ? Used any UI action to get this page printed? Basically we need to get this page converted to pdf and then get it printed. For now am looking just to get the print option. ..converting to pdf will take care later.

Any help appreciated.

felipe_barbosa · ‎10-08-2015

Hi Reghuram,

Well what I suggest to you is to put a print button in your jelly/html form:

<input type="button"

onClick="window.print()"

value="Print This Page"/>

This should do the trick.

Good luck!

Jeffrey Jackson · ‎08-28-2020

Thank you very much. This resolved my problem completely. I appreciate you passing this along for the rest of us. Great job.