I want to generate a PDF file using the xepOnline.jqPlugin.js plugin.
I have an image (on the "background") and an HTML text under the image. I am capable to generate the PDF file but there are two different elements: the image and, after the image (and not under the image), comes the text.
<!DOCTYPE html>
<html>
<head>
...
<script src="xepOnline.jqPlugin.js"></script>
</head>
<body>
<div id="page-show">
<div class="image">
<img src="img/Card.png" >
<h3>TEXT</h3>
</div>
<button id="PrintButton" onclick="return xepOnline.Formatter.Format('page-show',{render:'download'});"/>
</div>
</body>
</html>
The CSS for the relevant elements is the following:
#page-show{
/* The main container div */
width:355px;
margin:90px auto 0;
}
div.img {
height: 165px;
text-align: center;
}
div.img img {
display: inline;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
text-align: center;
}
h3 {
position: absolute;
top: 164px;
width: 100%;
font-size: 16px;
}
Is it possible to generate a PDF file of the image with the text under it? (with the same format as it appears in the HTML page)