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 PDF
Compose HTML
Solved! Go to Solution.
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
Hi @Deriooo,
There are some posts maybe could solve your problem, you can have a try with them:
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.
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:image/gif to data: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: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
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
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
Join digitally, March 2–4, 2021 to explore new tech that's ready to implement. Experience the keynote in mixed reality through AltspaceVR!
Power Platform release plan for the 2021 release wave 1 describes all new features releasing from April through September 2021.
User | Count |
---|---|
33 | |
16 | |
15 | |
12 | |
9 |
User | Count |
---|---|
40 | |
20 | |
19 | |
10 | |
9 |