cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
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
Highlighted
Super User II
Super User II

Re: Convert from HTML to PDF image issue

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
Highlighted
Community Support
Community Support

Re: Convert from HTML to PDF image issue

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.

 

Highlighted
Super User II
Super User II

Re: Convert from HTML to PDF image issue

@Deriooo 

Can you share the HTML?

Thanks J

Highlighted
Advocate I
Advocate I

Re: Convert from HTML to PDF image issue

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.

Highlighted
Super User II
Super User II

Re: Convert from HTML to PDF image issue

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

Highlighted
Advocate I
Advocate I

Re: Convert from HTML to PDF image issue

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
firstImage

Super User Program Update

Three Super User rank tiers have been launched!

firstImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

firstImage

New & Improved Power Automate Community Cookbook

We've updated and improved the layout and uploading format of the Power Automate Cookbook!

thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

Top Solution Authors
Users online (7,762)