Power Automate: Html code to convert to PDF & Footer/Header each page

Kim 0 Reputation points
2024-06-28T18:53:14.5966667+00:00

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
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,278 questions
0 comments No comments
{count} votes