title: HTML to MS word Conversion with header and footer using JavaScript
body: <p><a href="https://i.stack.imgur.com/0hu0N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0hu0N.png" alt="enter image description here"></a>Am rendering my whole HTML page into MS word. Here I tried by referring this link below:</p>
  
  <p><a href="https://phppot.com/javascript/how-to-export-html-to-word-document-with-javascript/" rel="nofollow noreferrer">https://phppot.com/javascript/how-to-export-html-to-word-document-with-javascript/</a></p>
  
  <p>it works fine. But I tried to set footer, it's not rendering instead it shows text in the footer at last page.
   By ref: 
  <a href="https://stackoverflow.com/questions/9340527/office-html-word-header">Office HTML Word header</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Export2Doc(element, filename = '') {
    $("#export_btn_word").remove();
    var header = "&lt;html xmlns:o='urn:schemas-microsoft-com:office:office' " +
      "xmlns:w='urn:schemas-microsoft-com:office:word' " +
      "xmlns:m='http://schemas.microsoft.com/office/2004/12/omml' " +
      "xmlns='http://www.w3.org/TR/REC-html40'&gt;" +
      "&lt;head&gt;&lt;meta http-equiv='Content-Type' content='text/html;charset=utf-8'&gt;&lt;title&gt;Export HTML to Word Document with JavaScript&lt;/title&gt;&lt;/head&gt;&lt;body&gt;";
    var footer = "&lt;div style='mso-element:footer' id=f1&gt;&lt;p class=MsoFooter&gt;&lt;span style='mso-tab-count:1'&gt;&lt;/span&gt;&lt;span style='mso-field-code:\" PAGE \"'&gt;&lt;/span&gt; &lt;/p&gt;&lt;/div&gt;";
    var end = "&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;";
    var sourceHTML = header + "&lt;div class='Section1'&gt;" + document.getElementById(element).innerHTML + footer + end;
  
    var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);
    var fileDownload = document.createElement("a");
    document.body.appendChild(fileDownload);
    fileDownload.href = source;
    fileDownload.download = '#form.la_request.RefNo#.doc';
    fileDownload.click();
    document.body.removeChild(fileDownload);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>p.MsoFooter,
  li.MsoFooter,
  div.MsoFooter {
    margin: 0in 0in 1in 0in;
    margin-bottom: .0001pt;
    mso-pagination: widow-orphan;
    tab-stops: center 3.0in right 6.0in;
  }
  
  .footer {
    font-size: 9pt;
  }
  
  @page Section1 {
    size: 8.5in 11.0in;
    margin: 0.5in 0.5in 0.5in 0.5in;
    mso-header-margin: 0.5in;
    mso-header: h1;
    mso-footer: f1;
    mso-footer-margin: 0.5in;
    mso-paper-source: 0;
  }
  
  div.Section1 {
    page: Section1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="export_btn_word" onclick="Export2Doc('view_ls_app1_grid_test');"&gt;Export as .doc&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please help me out!</p>