CODEWITHSUNDEEP
javascriptcsshttp-headersfooterwebview2
A Akshatha
A Akshatha

Reputation: 21

Header and Footer in PDF(WebView2) without overlapping with the contents- using .js and .css

My requirement is to show header and footer in the pdf in all pages. Due to some drawbacks, I am not using the WebView's header-footer property. So I am trying to show header and footer in all pages using script. For that I have used the following logic: .js file

  var blankDiv = document.createElement( "DIV" );
  blankDiv.setAttribute( "class", "customHeader" );
  blankDiv.innerHTML = "testdata";
  blankDiv.style.csstext="backgroundcolor:red !important;Height:50px !important;";
  var elementNode = document.getElementsByTagName( "FORM" )[0];
  elementNode.parentNode.insertBefore( blankDiv, elementNode );

  var blankDiv = document.createElement( "DIV" );
  blankDiv.setAttribute( "class", "customFooter" );
  blankDiv.innerHTML = "testdata";
  blankDiv.style.csstext="backgroundcolor:green !important;Height:50px !important;";
  elementNode.parentNode.insertBefore( blankDiv, elementNode );
  elementNode.setAttribute("class","formdata");

.css file

.customHeader
{
    background-color:red !important;
    position:fixed !important;
    top:0 !important;
    width:100% !important;
    height:20px !important;
}
 
.customFooter
{
    background-color:green !important;
    position:fixed !important;
    bottom:0 !important;
    height:20px !important;

}
.formdata
{
    margin-top:40px !important;
        margin-bottom:40px !important;
}

While using the above code, header and footer is showing in all the pages. The issue is the header/footer is getting overlapped with the contents of the page. How to avoid this overlapping of contents with the header/footer?

Upvotes: 0

Views: 29

Answers (0)

Related Questions