Hi All,
I have a requirement where I need to generate a PDF with dynamic values (which includes tables). I have been first generating HTML file using HTML Doc from Template smart service and later using HTML to PDF smart service but I have below mentioned issues with that smart service. Any help on the below is much appreciated!!
1. I need to insert images (icons and stamps) in the HTML but I couldnt able to. I have checked in community and found that we need to convert the image to base64 and then send the value to HTML. I have no idea on how to convert document to base64. I checked in appmarket but couldnt find any plugins as well.
2. I need to add three column footer. I have been using the below HTML code for the same, but I am not getting the right side value and footer is not getting aligned with the page margins or the body. I have given the values of A4 size in HTML to PDF smartservice( width 210 and height 297).
HTML Style:
<style> @page { size: A4; margin: 50px 50px 80px 50px; /* top, right, bottom, left */}
@page { @bottom-left { content: "Information"; } @bottom-center { content: "Page " counter(page) " of " counter(pages); } @bottom-right { content: "Generated on: " date()"; }}
body { font-family: Helvetica, sans-serif; font-size: 11pt; margin: 0; padding: 0; }
main { width: 100%; box-sizing: border-box; padding: 0 50px; margin-top: 70px; margin-bottom: 60px; /* Enough bottom margin to avoid footer clash */ }
h1, h2 { font-size: 13pt; margin-top: 30px; }
.section { margin-top: 20px; }
.field-label { font-weight: bold; margin-top: 10px; display: block; }
.placeholder { color: #000000; }
.code-table { border-collapse: collapse; }
.code-table td { border: 1px solid black; width: 18px; height: 18px; text-align: center; font-size: 10pt; }
.section-label { font-size: 12pt; }
.nowrap { white-space: nowrap; } </style>
Discussion posts and replies are publicly visible
My blog post gets your image requirements covered: https://appian.rocks/2023/10/23/great-pdfs-with-appian/
The formatting and CSS can be tricky. On the github repo, you will find great examples I typically start with.
github.com/.../openhtmltopdf
Thank you Stefan Helzle ! That solved my first issue. But I am still struggling to add header and footer. Do you know if there is any limitation with Appian related to below CSS? (Issue: I cannot see bottom-right value when I convert HTML to PDF)
I had this working in the past, but it was tricky for me, not being a CSS expert. But I started using this template
https://github.com/danfickle/openhtmltopdf/wiki/Page-features
and after some trial and error, I had it working. I do not have this working code at hand.
To make development faster, I created an interface which had a paragraph field on top to enter the HTML code, a button to start the PDF generating process, and a document viewer below.