I am trying to convert HTML to PDF and it is already passing something of the HTML page to the PDF. We have the following Code:
HTML:
<apex:page showHeader="false" sidebar="false" standardStylesheets="false" contentType="text/html"
applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" id="TestSampleInvoice">
<apex:stylesheet value="https://fonts.googleapis.com/css?family=Alef"/>
<html>
<head>
<meta charset="utf-8" />
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
font-size: 16px;
line-height: 24px;
font-family: Open-Sans, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td {
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
@media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL **/
.invoice-box.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.invoice-box.rtl table {
text-align: right;
}
.invoice-box.rtl table tr td:nth-child(2) {
text-align: left;
}
.alef {
font-family: 'Alef', serif;
font-size: 24px;
}
</style>
</head>
<body>
<div class="invoice-box">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img src="https://www.ailo-it.de/wp-content/uploads/2020/05/Ailo-IT-e1589191157673.jpg" style="width: 100%; max-width: 300px" />
</td>
<td>
Invoice #: 123<br />
Created: January 1, 2015<br />
Due: February 1, 2015
</td>
</tr>
</table>
</td>
</tr>
<tr class="information alef">
<td colspan="2">
<table>
<tr>
<td>
Ailo-IT<br />
Dreifürstensteinstr. 1-3<br />
72116 Mössingen
</td>
<td>
Customer Name<br />
Firstname Lastname<br />
email@example.com
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading" style="font-family:Tahoma">
<td>Payment Method</td>
<td>Check #</td>
</tr>
<tr class="details">
<td>Check</td>
<td>1000</td>
</tr>
<tr class="heading">
<td>Item</td>
<td>Price</td>
</tr>
<tr class="item">
<td>Website design</td>
<td>$300.00</td>
</tr>
<tr class="item">
<td>Hosting (3 months)</td>
<td>$75.00</td>
</tr>
<tr class="item last">
<td>Domain name (1 year)</td>
<td>$10.00</td>
</tr>
<tr class="total">
<td></td>
<td>Total: $385.00</td>
</tr>
</table>
</div>
</body>
</html>
</apex:page>
which already results in a proper looking HTML Page: HTML Page
On that HTML Page we have added a button to download the PDF using JSPDF:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.6/purify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<style>
.alef {
font-family: 'Alef', serif;
font-size: 24px;
}
</style>
<body>
<apex:outputText id="pdfContent" value="{!invoiceDataString}" escape="false">
<button value="Generate PDF" onclick="createPDF()">Generate PDF</button>
<script>
function createPDF(){
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({
encryption: {
userPermissions: ["print", "modify", "copy", "annot-forms"]
}
});
pdf.html(document.getElementById('{!$Component.pdfContent}'), {
callback: function (pdf) {
pdf.save('test.pdf');
},
});
}
But the generated PDF is not at all formatted. My question is, where to find any documentation on how to pass the HTML value to the PDF to use the applied styling and everything.
Current result can be downloaded here: Generated PDF
