In the modern day, PDF documents, with their consistent formatting and wide compatibility, have become a standard for sharing and displaying information. One common challenge faced by developers and businesses is the conversion of a given content to PDF. This process is crucial for generating professional-looking documents from web-based sources.
In this blog post, we’ll explore how our Convert to PDF Snap addresses this challenge, providing an easy-to-use solution for transforming input data from structured source through HTML into PDF document.
The Challenge of Converting HTML to PDF File
Because SnapLogic does not offer an out-of-the-box solution for converting HTML file to PDF file, businesses seeking an HTML to PDF converter can face significant challenges. Many workflows and integration scenarios require the generation of PDF documents from different sources, and the lack of a dedicated Snap made this task complex and time-consuming, often forcing businesses to use third-party tools.
The Formatting Solution
The Convert to PDF Snap serves as a solution to this challenge. It enables businesses to transform HTML content into PDF documents within their SnapLogic pipelines. This Snap eliminates the need for manual coding or third-party tools, providing a native and efficient way to handle HTML to PDF conversions.
HTML File to PDF Example
In the example below, we will take a look how we can transform an invoice data represented as a JSON object into PDF document by using our Convert to PDF snap. We will also see how we can configure the snap and what configuration settings it offers.
To transform the JSON data into HTML format we will use Apache Velocity template engine using the XML Generator snap to create the HTML template that will be used as a reference to generate the PDF document. We will even apply custom style to the invoice document.
JSON Data
[
{
"date": "12/01/2024",
"issueDate": "10/01/2024",
"dueDate": "20/01/2024",
"invoiceNumber": "INV-20240110",
"invoiceReference": "20240110",
"products": [
{
"name": "Product #1",
"quantity": 1,
"price": 100
},
{
"name": "Product #2",
"quantity": 1,
"price": 25
}
],
"billDetails": {
"to": "IWConnect",
"country": "North Macedonia",
"address": "Metodija Andonov Chento, no.15, 7000 Bitola"
}
}
]
HTML Template using Apache Velocity
<html>
<head>
<title>Invoice</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
padding: 0;
}
.invoice_main {
width: 100%;
}
.bill_to {
width: 100%;
margin-top: 50px;
}
.invoice_data {
width: 100%;
height: auto;
margin-top: 50px;
}
.invoice_data tbody td {
padding: 0;
margin: 0;
}
.invoice_data tbody tr:nth-child(odd) {
background: #D5D5D5;
}
.invoice_data tbody tr:nth-child(even) {
background: #E9E9E9;
}
.align-right {
text-align: right;
}
.align-center {
text-align: center;
}
.company {
display: inline-block;
width: 50%;
background: #151515;
text-align: right;
}
.company-logo {
width: 100px;
}
</style>
</head>
<body>
<table class="invoice_main">
<thead>
<tr>
<td style="font-size: 32px"><strong>INVOICE</strong></td>
<td class="align-right"><img class="company-logo" src="https://iwconnect.com/wp-content/uploads/2022/05/01_%E2%8B%AEIW-CONNECT-TM_-Long-LOGO_Light-background.png"/></td>
</tr>
</thead>
</table>
<hr>
<br>
<p><strong>Date:</strong> $date</p>
<p><strong>Invoice:</strong> $invoiceNumber</p>
<table class="bill_to">
<thead>
<tr>
<td><strong>BILL TO</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td>$billDetails.to</td>
<td class="align-right">Issue Date: $issueDate</td>
</tr>
<tr>
<td>$billDetails.address</td>
<td class="align-right">Due Date: $dueDate</td>
</tr>
<tr>
<td>$billDetails.country</td>
<td class="align-right">Reference: $invoiceReference</td>
</tr>
</tbody>
</table>
<table class="invoice_data">
<thead>
<tr>
<td><strong>Products</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td class="align-center">Description</td>
<td class="align-center">Quantity</td>
<td class="align-center">Amount</td>
</tr>
#foreach ($product in $products)
<tr>
<td>$product.name</td>
<td>$product.quantity</td>
<td class="align-right">$product.price</td>
</tr>
#end
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td style="border-bottom: 1px solid black"><strong>Total</strong></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="align-right">$$totalPrice</td>
</tr>
</tfoot>
</table>
</body>
</html>Configurations
The Convert To PDF Snap comes equipped with various configurations. Users can customize the size and orientation of the PDF document, choose the character set for encoding, and even perform value replacements within the HTML input.
- PDF Orientation: Choose between “Portrait” and “Landscape” orientations for the PDF document.
- PDF Size: Select from standard sizes such as A4, Letter, Legal, and more.
- Character Set: Define the character set in which the PDF data is encoded (e.g., UTF-8, UTF-16).
- Replace Value: Optionally replace a specific value in the HTML input with a user-defined value.
Pipeline Structure
Generated PDF Document
Benefits of Using the Snap
- Transformation: Simplify the HTML to PDF conversion process with a native SnapLogic solution.
- Configurability: Customize PDF output according to your requirements, including orientation, size, and character set.
Use Cases
- Document Generation: Dynamically generate PDF documents from HTML sources.
- Invoice Generation: Create standardized PDF reports from HTML data for invoice generation.
- Healthcare Patient Reports: Create standardized PDF reports from HTML data for healthcare patient records, enhancing documentation and compliance.
Conclusion
The Convert to PDF Snap can be a valuable addition to your integration toolkit, providing a native and efficient solution for transforming HTML content into professional-looking PDF documents. With its configurations and integration capabilities, this Snap simplifies workflows that require processing data and generating PDF documents.
