Microsoft 365
Formerly Office 365, is a line of subscription services offered by Microsoft which adds to and includes the Microsoft Office product line.
4,193 questions
Power Automate: Html code to convert to PDF & Footer/Header each page
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(233.6, 33%, 32%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EK%3C/text%3E%3C/svg%3E)
Kim
0
Reputation points
I have a Microsoft form and I am using power automate to generate an html report each time a response is submitted. Using Power automate the html report gets converted to PDF. In the report I have a footer and header to each page, but the rest of the content/body/sections overlap the header after the first page and the footer in all pages. Is there a way to fix that, for the content to make a page break before each footer and start after the header, with normal spacing.
This is what I have so far,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@page {
margin-left: 0.5in;
margin-right: 0.5in;
margin-top: 0.2in;
margin-bottom: 0.2in;
}
body {
font-family: "Times New Roman", serif;
font-size: 14px;
margin: 0.5in 0; /* Add margin only to the top and bottom */
padding: 0;
width: 100%; /* Width and height should be 100% for print layout */
height: 100%;
background-color: #ffffff;
color: #000000;
box-sizing: border-box;
position: relative;
}
.header {
position: fixed;
width: 100%;
text-align: center;
font-size: 11px;
top: 0;
}
.footer {
position: fixed;
width: 100%;
text-align: center;
font-size: 11px;
bottom: 0;
}
.page-break {
page-break-before: always; /* Force a page break before footer */
}
.section-title {
font-weight: bold;
margin-bottom: 20px;
text-align: center;
font-size: 20px;
}
.sub-section-title {
font-weight: bold;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
font-size: 16px;
page-break-inside: avoid; /* Avoid breaking inside the content */
}
.title-12 {
font-size: 14px;
text-align: justify;
white-space: pre-wrap;
}
.answer {
font-size: 14px;
text-align: justify;
white-space: pre-wrap;
}
</style>
</head>
<div class="header">
Survey
</div>
<div class="footer">
Survey
</div>
<body>
<h1 class="section-title">Report</h1>
<div style="height: 20px;"></div> <!-- Adding one more space between Report and Information -->
<h2 class="sub-section-title">Information</h2>
<p class="title-12">Date of Report: @{outputs('Get_response_details')?['body/r031e3a']}</p>
<p class="title-12">Type: @{outputs('Get_response_details')?['body/r927a0a']}</p>
<p class="title-12">Org: @{outputs('Get_response_details')?['body/r9591c']}</p>
<p class="title-12">Contact: @{outputs('Get_response_details')?['body/ra7']}</p>
<p class="title-12">Department: @{outputs('Get_response_details')?['body/r45feb']}</p>
<p class="title-12">Member: @{outputs('Get_response_details')?['body/rc3af54']} | @{outputs('Get_response_details')?['body/rb24b']}</p>
<p class="title-12">Group: @{outputs('Get_response_details')?['body/r176']}</p>
<div style="height: 40px;"></div> <!-- Adding space between Report and Comments -->
<h2 class="sub-section-title">Comments</h2>
<p class="answer">@{outputs('Get_response_details')?['body/rdd6']}</p>
<div style="height: 40px;"></div> <!-- Adding space between sections -->
<h2 class="sub-section-title">Issues</h2>
<p class="answer">@{outputs('Get_response_details')?['body']}</p>
<div style="height: 40px;"></div> <!-- Adding space between sections -->
<h2 class="sub-section-title">Feedback</h2>
<p class="answer">@{outputs('Get_response_details')?['body/r42a3']}</p>
</body>
</html>