A couple of questions go in this direction on StackOverflow, but are off-topic there, so let's have an on-topic question here.
It would be nice if you put an example screenshot in your answers for each tool / library you suggest.
Also, please note:
- CSS: Does the tool / library apply CSS?
- @page: Does it apply landscape / portrait mode?
- Fonts? (This question is only for tools/libraries that respect
@font-face) - Colors?
- JavaScript: Does it apply JavaScript before the PDF is generated?
- gratis or not
- open-source or not
- What are the requirements?
Example 1
You could use the following as an example for testing:
<!DOCTYPE html>
<html>
<head>
<title>HTML 2 PDF print test</title>
<style type="text/css">
body {
font-size: 14px;
color: #333;
}
table {
width: 100%;
max-width: 100%;
border-spacing: 0;
border-collapse: collapse;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
th {
text-align: left;
}
td, th {
vertical-align: top;
border-top: 1px solid #ddd;
line-height: 1.42857143;
padding: 8px;
}
tbody tr:nth-child(odd) {
background-color: #f9f9f9 !important;
}
@media print{
@page {size: landscape}
}
</style>
</head>
<body>
<table class="table table-striped">
<tr>
<th style="font-family:Courier New;">Country</th>
<th style="color: red;">Code</th>
<th style="color: red !important;">Phone</th>
<th>Language</th>
<th>Population</th>
<th>Banana Rama</th>
<th>Foo bar</th>
<th>Constants</th>
<th>Empty Cells</th>
<th>More</th>
<th>End</th>
</tr>
<tr>
<td>Germany</td>
<td>de</td>
<td>+49</td>
<td>German</td>
<td>82 Million</td>
<td id="cell">JavaScript does <span style="color: red">not</span> work.</td>
<td>dasfd asfawerf asdfvas fwer </td>
<td>asd fasdf asdfa sdfa sdf asdf asdf asdfa sdf asd</td>
<td>-</td>
<td>asdf asdfasd fasdf asdfa sdfasdf</td>
<td>ad fasd fasd fasd fasdf asd fasdf as</td>
</tr>
<tr>
<td>France</td>
<td>fr</td>
<td>+01</td>
<td>French</td>
<td>70 Million</td>
<td>a asdfa sdf asdf asdf asdfasd asdf asdf asd fasd fasdfa sdf</td>
<td>aerte fasf werwasdfa sd3e asdf adfasdfe werfa sdfas</td>
<td>as dfasd fasd fasd fasd fasd </td>
<td></td>
<td>asd fasd fasdf asdf asd fasdf asdf asd fasdf asdf </td>
<td>as dfa sd asfdas asfd </td>
</tr>
<tr>
<td>Great Britain</td>
<td>uk</td>
<td>+02</td>
<td>English</td>
<td>60 Million</td>
<td>asdfasdf asdf asdfa sdf asdfasdf </td>
<td>asd fasdf asdf asdfwr wadfa sd f</td>
<td>ada asdf asd</td>
<td></td>
<td>a sd fasd fasdf asdf asdfa sdf a</td>
<td>asasd asdf asd fasd fas asd fasdf </td>
</tr>
<tr>
<td>United States of America</td>
<td>us</td>
<td>+03</td>
<td>English</td>
<td>300 Million</td>
<td>asdf asdfasd fasdfwerwfasdfasdf asdfasdfasd </td>
<td>a dfasdf asdf asdf rt asdf asdfasd asdf asd fasd fas</td>
<td>a dsfas fasd f</td>
<td></td>
<td>a dsfa sdfasd fasd f</td>
<td>a dsfasd asdf asdf asd fafasd fas fas </td>
</tr>
</table>
<script type="text/javascript">
var cell = document.getElementById("cell");
cell.innerHTML = "JavaScript <span style='color: green; font-weight:bold'>works</span>";
</script>
</body>
</html>
Chrome makes the following out of it with its print function:
Things to note:
- The page is in landscape mode ✓
- The font is changed for Country ✓
- Code is red ✓
- Phone is red ✓
- The table is striped ✓
- JavaScript is applied ✓
pdfkit,pandoc, PrinceXML,weasyprint,wkhtmltopdf.