Solved: Re: Convert from HTML to PDF image issue

Deriooo · ‎11-08-2019

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 PDFCompose HTML

Jay-Encodian · ‎11-13-2019

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

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

The results are shown below:

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:

Hope this helps

Jay

View solution in original post

v-litu-msft · ‎11-10-2019

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.

Jay-Encodian · ‎11-12-2019

@Deriooo

Can you share the HTML?

Thanks J

Deriooo · ‎11-12-2019

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.

Jay-Encodian · ‎11-13-2019

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

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

The results are shown below:

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:

Hope this helps

Jay

View solution in original post

Deriooo · ‎11-14-2019

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

Convert from HTML to PDF image issue

Helpful resources

Launching new user group features

Community & How To Videos

Microsoft 365 Collaboration Conference | December 7–9, 2021