I am generating invoices dynamically using thymeleaf and HTML and have used bootstrap 5 to lay out the whole thing which uses CSS3 but when I need to generate a PDF from HTML, everything works fine but the layout gets messed up as the used library doesn't support CSS3. I have tried using flying saucer, and openhtmltopdf-pdfbox but none of them gives the desired results.
Generated HTML From thymeleaf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<link rel="stylesheet" href="templates/css/bootstrap.min.css">
<style media="all">
:root {
--primary-color: #E01B33;
}
.theme-background-color {
background-color: var(--primary-color);
}
.theme-text-color {
color: var(--primary-color);
}
tfoot {
border-bottom: 0;
}
</style>
</head>
<body>
<div class="px-4" id="container">
<div class="row">
<div class="col">
<h2 class="fw-bold">ABC</h2>
<br/>
<h3>asdasdsad</h3>
<br/>
<text>Phone Number:- asdasdasd</text>
<br/>
<text>Email:- sadasdasd</text>
<br/>
<text>Gst No.:- asdasdasdas</text>
</div>
</div>
<h1 class="text-center mt-4 fw-bold theme-text-color">Sale Invoice</h1>
<div class="row mt-4">
<div class="col">
<text class="fw-bold">Bill to:</text>
<br/>
<text class="fw-bold">asdasdasd</text>
<br/>
<text>asdasdasda</text>
<br/>
<text>Customer Number:- asdsadasd</text>
</div>
<div class="col text-end">
<text class="fw-bold">Invoice No:- 1</text>
<br/>
<text class="fw-bold">Invoice Date:- 20/7/2022</text>
</div>
</div>
<div>
<table class="table table-striped table-hover mt-4">
<tr class="theme-background-color">
<th>#</th>
<th>HSN</th>
<th>Name</th>
<th>Quantity</th>
<th>Price/Unit</th>
<th>Discount</th>
<th>GST</th>
<th>Amount</th>
</tr>
<tr>
<td>1</td>
<td></td>
<td>Apple</td>
<td>10</td>
<td>₹ 100</td>
<td>₹ 100(10)</td>
<td class="text-wrap">₹ 45(GST%5)</td>
<td>₹ 945</td>
</tr>
<tfoot class="border-bottom border-dark ">
<tr>
<td colspan="3" class="fw-bold">Total</td>
<td colspan="3" class="fw-bold">10</td>
<td class="fw-bold">45</td>
<td class="fw-bold">945</td>
</tr>
</tfoot>
</table>
</div>
<div class="row mt-4">
<div class="col">
<table class="table table-striped">
<tr>
<td class="fw-bold text-muted">TERMS AND CONDITIONS</td>
</tr>
<tr>
<td class="fw-bold text-muted">Hello terms</td>
</tr>
</table>
</div>
<div class="col">
<table class="table">
<tbody>
<tr>
<td>Sub Total</td>
<td>₹ 1,000</td>
</tr>
<tr class="theme-background-color">
<td class="fw-bold">Total</td>
<td class="fw-bold">₹ 945</td>
</tr>
<tr>
<td>Received</td>
<td>₹ 400</td>
</tr>
<tr>
<td>Balance</td>
<td>₹ 545</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Java Code to generate PDF
public void generatePDF(FileOutputStream outputStream, String html) throws IOException {
PdfRendererBuilder pdfBuilder = new PdfRendererBuilder();
pdfBuilder.useFastMode();
pdfBuilder.withUri("path/to/pdf.file");
pdfBuilder.toStream(outputStream);
pdfBuilder.run();
// ITextRenderer renderer = new ITextRenderer();
// renderer.setDocumentFromString(html);
// renderer.layout();
// renderer.createPDF(outputStream, false);
// renderer.finishPDF();
}
Pom.xml
<dependency>
<groupId>org.xhtmlrenderer</groupId>
<artifactId>flying-saucer-pdf-openpdf</artifactId>
<version>9.1.22</version>
</dependency>
<dependency>
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-core</artifactId>
<version>1.0.10</version>
</dependency>
<dependency>
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-pdfbox</artifactId>
<version>1.0.10</version>
</dependency>
<dependency>
<groupId>com.openhtmltopdf</groupId>
<artifactId>openhtmltopdf-java2d</artifactId>
<version>1.0.10</version>
</dependency>
