Use wkhtmltopdf to convert html table report:
<!DOCTYPE html>
<html lang="en"></html>
<head>
<style type="text/css">
@font-face {
font-family: Plex;
src: url(/home/shawn/Development/Websites/MDSova/restapi/templates/fonts/IBMPlexSans-Regular.ttf);
}
@font-face {
font-family: Plex-Bold;
src: url(/home/shawn/Development/Websites/MDSova/restapi/templates/fonts/IBMPlexSans-SemiBold.ttf);
}
body {
font-family: Plex, Arial, Helvetica, sans-serif;
background-color: #FFF;
font-size: 18px;
}
h1,
h2,
h3 {
margin: 0;
padding: 0;
}
.report-data-table,
.report-title-table {
width: 100%;
border-collapse: collapse;
}
.report-title-table {
line-height: 36px;
}
.report-title-left,
.title-right {
width: 15%;
}
.report-title-center {
width: 70%;
text-align: center;
}
.report-title-right {
text-align: right;
}
.report-date-header,
.report-date-col {
width: 10%;
background-color: chocolate;
}
.report-for-header,
.report-for-col {
width: 14%;
background-color: palegreen
}
.test {
width: 78%;
background-color: forestgreen;
}
.report-date-header,
.report-for-header,
.report-source-header,
.report-sourcename-header,
.report-account-header,
.report-method-header,
.report-reference-header,
.report-amount-header {
font-family: Plex-Bold;
border-bottom: 1px solid #333;
}
</style>
</head>
<body>
<table class="report-title-table">
<tr>
<td class="report-title-left">01/15/2023</td>
<td class="report-title-center">
<h1>Payment Ledger</h1>
</td>
<td class="report-title-right">11:23AM</td>
</tr>
</table>
<table class="report-data-table">
<tr>
<td class="report-date-header">Payment Date</td>
<td class="report-for-header">Payment For</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
<tr class="column-row">
<td class="report-date-col">01/23/2023</td>
<td class="report-for-col">PAYMENT ON ACCOUNT</td>
<td class="test"></td>
</tr>
</table>
</body>
I know there's a lot of code here, but there are a few lines that are misaligned. It's not just on one line either - it's random. When the html is put into the browser it displays fine, but it doesn't convert to a print version. What can I do to correct this problem? Thanks
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
After adding more lines, I was able to reproduce the issue, which shows that the issue is indeed quite unpredictable.
However, the problem seems to be caused by the
border-collapse:collapse;css property. Removing it makes all rows the same height.Of course, this will also result in a white border around each table cell, which may be undesirable.
To make the border blend in with the cell, the solution is to color the column using the background pattern of the entire table (rather than the
background-colorproperty of the individual cell).In the code below, I create an inline svg image consisting of three rectangles with table column widths and colors:
In order for column widths to be calculated correctly during conversion, I need to adjust the dpi setting to 130:
HTML code:
Payment Ledger
Generated pdf file: