I'm trying to convert simple html to pdf but the styling in my browser is different than the one in pdf. I'm using flying-saucer-pdf v9.1.18. Do you have any idea why?
here is how it looks on web browser and how it looks in the generated pdf:
https://i.stack.imgur.com/MB7DB.jpg
Here is my simple html template:
<html>
<head>
<style>
.aligned {
vertical-align: bottom;
}
.colored {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<table border="1" width="300px" height="300px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td class="colored">4</td>
</tr>
<tr>
<td>5</td>
<td class="aligned">6</td>
</tr>
</table>
</body>
</html>
From docs:
No support for legacy or "street" HTML, although there are several
open source Java HTML cleaners of varying quality available. We render
well-formed XML; XHTML is a well-formed XML document which uses a
special set of tags. We can't render most HTML "in the wild". At best,
you can "clean up" old HTML with TagSoup or JTidy or similar library
and hope for the best. But without a bunch of work, you won't be able
to use Flying Saucer for a real web browser component. However, note
that's not a technical limitation, just a lack of time and resources.
The "height" attribute of TABLE tag is standard at all, I guess flying-saucer is ignoring it.
See e.g. Setting the height of a table in HTML has no effect
I'm maintaining a Web Application created using GWT, and which historically was developed to work only in Google Chrome.
There are several "reports" that can be extracted from the system. The way this is implemented is as follows: first, the html for the report is created and displayed in a section of the screen (this works correctly). After that, there is a button which allows to print the report. This action generates the html with the information (in a html table) the same way it would to create the on-screen report, and uses it to create a html file that is then sent to print.
This is where the monster shows its face! (tum-dum-dummmm - dramatic music).
Since Google Chrome updated to verssion 59.0.3071.86, when printing, the table/cells lose their borders, and background colors.
I thought maybe it had comething to do with the generated html, but in fact if I force the html upon printing to be
<!DOCTYPE html>
<html>
<head>
<style>table, th, td {border: 1px solid black !important;}</style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
the table still does not get printed correctly (and this is seen also in the Chrome's print preview (yes, even with the option to print background images selected)). The same thing happens if I style the table upon the table's tag itself. Something like:
<table style="border: 1px solid black !important;">
I'm out of ideas, so I'm asking if anybody got into a similar issue, or has any idea about what can I try.
Thanks in advance.
And edit to say that this is not the same problem as the one in the "possible duplicates". I had the "background colors" problem in the past, and I've fixed it. In this case (and as the code-snippet shows) it seems some styles are not interpreted, like for instance the table border. And everything was working prior to chrome 59.0.3071.86, so it seems to be a new issue, not a "solved somewhere in a 5 years' span" one.
And yet another edit to explain a little further:
somewhere in my webapp, there's a little button that reads "print report". This generates an html file which is then sent to print.
I replaced the generated html with a rather simplistic one that ilustrates my problem.
So, everytime I press "Print Report", I "force" this to be the generated html:
<!DOCTYPE html>
<html>
<head>
<style>table, th, td {border: 1px solid black !important;} body { -webkit-print-color-adjust: exact; } </style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor="#FF0000">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Notice how I use the
body { -webkit-print-color-adjust: exact; }
Also, I tried some variations like styling the table as:
<table style="border: 1px solid black !important;">
Or the body as
<body style="-webkit-print-color-adjust: exact;">
I'll just add an image from an "html testbed" to show how my omnipresent html should display:
However, when the print preview "pops", this is what I get:
So, neither does the backgound color displays (as I believe happens to other SO users, but with their solution not working here) nor the table borders.
Other edit: I tried defining "print-specific css rules", as follows:
<!DOCTYPE html>
<html>
<head>
<style>
#media print {
body { -webkit-print-color-adjust: exact; }
table, th, td {border: 1px solid black !important;}
}
</style>
<title>title</title>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor=\"#FF0000\">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
but I get the same results as before. Also (and maybe this is relevant... and maybe it isn't) if I define, for instance, a table width, THAT styling is correctly displayed upon printing, whilst the table borders are still hidden/not present/magically removed (chose one).
FINAL EDIT - workaround:
I was not able to solve the problem per se, and I really REALLY do not understand why it happens.
What I was able to do was get a workaround working, and I'm posting it here not as an answer, but still hopping it could help somebody:
The way I did it was: when I pressed the print button, I open a new window having only the html that I want to print (exactly as I want it printed), and using javascript I make it print after the page is loaded.
This way it works, and it prints with the correct formatting.
Some might say it is luck, others "black magic". I say "Done! Next!" (altough I'm not happy with the fact I don't understand the problem in the first place).
Have you tried the style directly inside the table tag?
<table border="1px" bgcolor="green">
<tr>
<td>ANYTHING RANDOM
</td>
</tr>
</table>
D.
<table border="1" >
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor="#FF0000">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<table border="1" >
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td bgcolor="green">Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
/* you can add the table border with size 1 or your wish . In HTML table border tag helps to add this feature to the web application.*/
Others experiencing the same issue were able to resolve with "border: thin solid #000;", where the border thickness was expressed as "thin" rather than "1px".
I have the following basic html table with a Java function to print only the table content However the Print button does nothing when clicked,I figure probably the java coding is the issue, however it is not working could I get a third pair of eyes to assist please
<html>
<body>
<table border="1" cellpadding="3" id="printTable">
<tbody><tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
</tbody></table>
<br />
<br />
<button>Print me</button>
<script>
function printData()
{
var divToPrint=document.getElementById("printTable");
newWin= window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
$('button').on('click',function(){
printData();
})
</script>
</body>
</html>
When working with javascript, it is often useful to look at your browser's console. After opening this page, mine has the error:
ReferenceError: $ is not defined
$ is a global variable inserted by jQuery. Try adding
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
to the code. This will include the jQuery library.
The call to the javascript function is not correct. When you're using the '$' symbol it means that you're using JQuery. You have 2 options:
1 - Include the jquery library to your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
2 - Call the javascript function directly on the button on the 'onclick' event. This is the best option in your case:
<button onclick="printData()">Print me</button>
Change this var divToPrint=document.getElementById("printTable");
to this var divToPrint=document.getElementById("<%=printTable.ClientID>");
and add jquery library <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
I am Generating and sending Mailer using Servlet by replacing placeholders in Mail Template.Can I Use embedded style in Email for Styling as Below instead of inline styling
I am using a Newsletter email which has three place holder for Header Image, Email Body and Email Footer.Now the problem is since the Header Image is with in a anchor tag I am getting a border around the Image.
Is it Possible to get rid of the border by using embedded css
Is there any alternate solution for this problem since the whole ###HEADER_IMAGE### is replaced by Image tag rather than Just image source.
The HTML code is as below.
<html>
<style>
a img
{
border-style : none;
}
</style>
<table width="590">
<tr>
<td colspan="2">
<a href="#" target="_blank">
###HEADER_IMAGE###
</a>
</td>
</tr>
</table>
<div>
###EMAIL_BODY###
</div>
<div>
###EMAIL_FOOTER###
</div>
</html>
Thanks for Reply
I have the following HTML
<html>
<head>
<title>test</title>
</head>
<body>
<table>
<caption>table title and/or explanatory text</caption>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td id=\"test\" width=\"272\"></td>
</tr>
</tbody>
</table>
Test link
<img src=\"http://www.google.se/images/nav_logo95.png\" />"
</body>
</html>;
And I want to find the first link with jsoup and replace it with a text
Element elem = page.select("a[href=" + link.getUrl() + "]:contains(" + link.getName() + ")").first();
I can only replace the inner HTML with elem.html("foo") or print the outerHtml with elem.outerHtml()
Does anyone know how I can achieve this?
I found the answer!
TextNode text = new TextNode("foo", "");
elem.replaceWith(text);
Once you have found the element that you want to work with, you may apply the commands such as explained here: http://jsoup.org/cookbook/modifying-data/set-html
I could not get it right. I am trying this:
elemento.prepend("<a href='www.test.com'>");
elemento.html("Roberto C. Santos.");
elemento.append("</a>");
elemento.wrap("<a href='www.test.com'> </a>");
But I am getting this:
<td> <a style="" target="_self" title="" href="http://ivv.veveivv.vvzenes.com.br/mao/ara/ccacao" data-mce-href="resolveuid/5cc1c7c8c9efcacaaeedec22a9c69a54" class="internal-link">Roberto C. Santos.</a></td>
</tr>
I still don´t know the exact way to exchange the contents of an URL element.
I´d like to have, as the result:
<a href='www.test.com'> Roberto C. Santos.</a>"
How coul´d I erase the href that is inbetween?