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
Swathimdas For the first point, you can store images as Appian documents and reference them in your HTML using the following approach:
"<img appianDocId =" & document(ri!documentImage,"id") & " >"
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.
Thank you Magesh! That solved my issue!
Thanks Stefan! That actually helped. I was able to manage the margins only by giving in page style and not specifying any margins for body or main.
You are my hero for the image fix. Thank you!