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

 

 

 

View solution in original post

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
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Users online (3,193)