Convert HTML to PDF using OneDrive action ignores styling

Like (1) Share

Report

Posted on 24 Oct 2022 08:10:49 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:

I have the same question (0)

All responses (2)

Answers (1)

Verified answer

alextriggle 19 on 03 Nov 2022 at 15:46:07

Like (1)

Report
Re: Convert HTML to PDF using OneDrive action ignores styling

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 26 Feb 2023 at 06:51:07

Like (0)

Report

Re: Convert HTML to PDF using OneDrive action ignores styling

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