Convert HTML to PDF using OneDrive action ignores styling

(1) Share

Report

Posted on by alextriggle

Hi community,

I'm trying to populate a pdf poster which implies to overlap 2 images and a background.

For whatever reason, when I dynamically populate the HTML, the result is fine. But once I convert it to PDF, the 2 images that are inline with the backrgound just go to the top left corner. It looks like the <style> section of the HTML is being ignored. I also tried with inline styling but same result...

concat('<!Doctype html>

<html>

<head>

<title>Poster automation</title>

</head>

<body>

<img src="',variables('variableSide'),'" style="position:absolute; top: 560px; left: 8px; z-index: 3;">

<img src="',variables('variableQR'),'" style="position:absolute; top: 768px; left: 552px; z-index: 2; width: 225px; height:225px;">

</div>

</body>

</html>')

HTML output:

PDF output:

Categories:

General topics

I have the same question (0)

All responses (2)

Answers (1)

Sort by

Verified answer

alextriggle 19 on at

Like (1)

Report
Copy link

Link copied!
In case anyone is also affected by the same issue, we've found a suitable solution!

Basically the only way to get pictures over other pictures is to put the one in the back as backgroud, and the rest of overalying pictures in a table, and play with paddings, widths and heights of the rows and columns.

The resulting HTML looks like below and converts correctly to PDF:

concat('<!Doctype html> <html> <head> <title>Poster automation</title> <style> .background { background-image: url("',variables('variableBackground'),'"); background-position: 0px 0px; background-repeat: no-repeat; } .qr { position:absolute; z-index: 2; } .side { position:absolute; z-index: 3; } .no { display:none } </style> </head> <body> <table class="background"> <tr style="vertical-align:top;"><td height="772px" width="352px" style="padding-top:355px"><img src="',variables('variableSide'),'" width="15px"></td><td width="179px" style="padding-top:494px;"><img src="',variables('variableQR'),'" width="145px"></td></tr> </table> </body> </html>')

Was this reply helpful? Yes No
LelandUsher 26 on at

Like (0)

Report
Copy link

Link copied!

Hello, I am trying the PDF conversion and have successfully created my local variable of the image as shown below:

I am successfully creating my html compose as shown here:

I am successfully generating my PDF however, the image refuses to be the background!!! Any ideas why this is failing for me? Thanks

By the way, I can display my image by using the following concat formula, however it is just showing as an image and not cooperating as a background

concat('<!DOCTYPE html>
<html>
<body>
<div><img src="',variables('PDFImage1'),'"></div>
<div>"',variables('var_html'),'"></div></body></html>')

I do not want the image as a standalone like a header, I would prefer to place my text on top of the image.

Thanks

Was this reply helpful? Yes No