9,631 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
10
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>
Microsoft 365 and Office | Install, redeem, activate | For business | Windows
2 answers
Sort by: Most helpful
-
Deleted
This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Comments have been turned off. Learn more
-
Deleted
This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Comments have been turned off. Learn more