cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Marie_Causse
Frequent Visitor

Convert a HTML file to PDF, where is my CSS ?

Hello,

 

At the moment I'm stuck on a very specific action. The company where I work has blocked the possibility to make a screenshot so the solution here is to recreate the visual of my powerapps application in HTML and then convert it to PDF so that the user saves his "home made" screenshot in his onedrive.

 

Marie_Causse_0-1643219373655.png

To get there I create a variable containing all my HTML content and convert the file. The HTML code works fine elsewhere and it generates what I want but during the conversion the CSS is not taken into account.

 

Here's what I'm supposed to have and what I actually have:

Marie_Causse_0-1643220016855.png

 

Marie_Causse_2-1643219657007.png

 

Here we have my HTML code:

<html>
<head>
<title> Profile Card</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body
{
margin: 0;
padding: 0;
background: #f1f1f1;
font-family: arial;
box-sizing: border-box;
}
.card-container
{
width: 300px;
height: 450px;
background: #FFF;
border-radius: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 1px 10px 1px #000;
overflow: hidden;
display: inline-block;
}
.upper-container
{
height: 80px;
background: #04246a;
}
.image-container
{
background: white;
width: 90px;
height: 90px;
border-radius: 50%;
padding: 5px;
transform: translate(100px,10px);
}
.image-container img
{
width: 90px;
height: 90px;
border-radius: 50%;
}
.lower-container
{
height: 28Opx;
background: #FFF;
padding: 10px;
padding-top: 25px;

}

.lower-container h3, h4
{
text-align: center;
font-size: 14px;
box-sizing: border-box;
line-height: 0;
font-weight: bold;
}

.lower-container h4
{
font-size: 12px;
font-weight: lighter;
}

.lower-container p
{
padding-left : 10px;
font-size: 12px;
margin-bottom: 50px;
}

.QRcode
{
background: red;
width: 110px;
height: 110px;
padding: 5px;
transform: translate(95px,200px);
}

.LogoGroup
{
width: 60px;
height: 20px;
padding: 5px;
transform: translate(220px,200px);
}

.LogoUser
{
width: 60px;
height: 20px;
padding: 5px;
transform: translate(10px,170px);
}
</style>
</head>

<body>
<div class="card-container">
<div class="upper-container">
<div class="image-container">
<img src=@{variables('Toto')} alt="User photo">
</div>

<div class="QRcode">
<img src="@{dataUri(outputs('Obtenir_le_contenu_du_fichier')?['body'])}" alt="QRCode" width ="110">
</div>

<div class="LogoGroup">
<img src="Link " alt="Logo group" width ="60">
</div>

<div class="LogoUser">
<img src="Link" alt="Logo company" width ="60">
</div>


</div>


<div class="lower-container">
<div><h3>@{variables('Name')}</h3>
<h4>@{variables('JobTitle')}, @{variables('Entité')}, @{variables('Société')}</h4>
</div>
<div>
<p><b>Email:</b> @{variables('Email')}<br>
<b>Phone:</b> @{variables('ContactNumber')}<br><br>

<b>Office address:</b><br>
@{variables('Region')}<br>
@{variables('Address')}<br>
@{variables('PostalCode')}<br>
@{variables('City')}<br>
@{variables('State')}<br>
@{variables('Country')}
</p>
</div>
</div>

</div>

</body>
</html>

 

 

Does anyone have an idea? I'm running out...

 

Have a nice day and thank you

0 REPLIES 0

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.

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,423)