HTML to PDF Conversions

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>