cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Deriooo
Advocate I
Advocate I

Convert from HTML to PDF image issue

Hi all,

 

I have an issue with convert to PDF in Microsoft flow. See images attached the flow setup, I am having a problem with the background-image, the html file displays the background image correctly, but once the HTML file is converted to PDF the background image is removed from the file.

 

Does anyone have any idea where I am going wrong please? I'm not sure if PDF supports the background-image hence why it is being dropped from the file, but any advice on this would be greatly appreciated. 

Any other details needed please let me know.

Thanks in advance,

Deri



Convert HTML file to PDFConvert HTML file to PDFCompose HTMLCompose HTML

 

1 ACCEPTED SOLUTION

Accepted Solutions

Hi @Deriooo 

I've just setup the following Flow to verify, please find the source HTML attached which uses a DataUri to set a background image.

Flow Setup

 

1.png

 

Seems there are a few service issues with the Overdrive conversion service this morning but it is working sporadically.

The results are shown below:

2.png

 

From testing it seems the OneDrive connector just doesn't support this CSS feature unfortunately.

OneDrive does support the DataURi in an <img> tag just not as specified within a CSS background property, (albeit the styles/layout are not quite correct!) see below:

 

3.png

Hope this helps

Jay

 

 

 

View solution in original post

5 REPLIES 5
v-litu-msft
Community Support
Community Support

Hi @Deriooo,

 

There are some posts maybe could solve your problem, you can have a try with them:

https://www.essentialobjects.com/forum/postst9955_Background-Image-Not-Displayed-when-HTML-Rendered-...

https://stackoverflow.com/questions/33781821/display-background-image-html2pdf

Best Regards,
Community Support Team _ Lin Tu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

 

@Deriooo 

Can you share the HTML?

Thanks J

Hi J,


I've made a couple of changes since the original post trying to correct the issue, but my current HTML is below, I've changed the data&colon;image/gif to data&colon;image/jpeg following the file format of the image I am trying to use as the background, I have also changed the base of the URL trying to pull through the image in base64 rather than calling the content of the image directly, but still same issue, displays correctly in HTML but not in PDF. 

 

<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url('data&colon;image/jpeg;base64,@{base64(body('Get_file_content_using_path'))}');
height:100%;
width:100%;
background-size: 50%;
background-repeat: no-repeat;
}
div{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
</style>

</head>
<body>
<div>
hello
</div>
</body>

</html>

Thanks for looking at this.

Hi @Deriooo 

I've just setup the following Flow to verify, please find the source HTML attached which uses a DataUri to set a background image.

Flow Setup

 

1.png

 

Seems there are a few service issues with the Overdrive conversion service this morning but it is working sporadically.

The results are shown below:

2.png

 

From testing it seems the OneDrive connector just doesn't support this CSS feature unfortunately.

OneDrive does support the DataURi in an <img> tag just not as specified within a CSS background property, (albeit the styles/layout are not quite correct!) see below:

 

3.png

Hope this helps

Jay

 

 

 

Hi Jay @Jay-Encodian ,

 

Thanks for your help with this really appreciate it, and for confirming the connector doesn't support the conversion, this will save me more wasted time trying to get the image to display!

 

I'll have to find a workaround for what I am trying to achieve, thanks again!


Deri

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

May UG Leader Call Carousel 768x460.png

June User Group Leader Call

Join us on June 28 for our monthly User Group leader call!

MPA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

Learn to digitize and optimize business processes and connect all your applications to share data in real time.

Power Automate Designer Feedback_carousel.jpg

Help make Flow Design easier

Are you new to designing flows? What is your biggest struggle with Power Automate Designer? Help us make it more user friendly!

Users online (3,977)