HTML to MS word Conversion with header and footer using JavaScript

问题

Am rendering my whole HTML page into MS word. Here I tried by referring this link below:

https://phppot.com/javascript/how-to-export-html-to-word-document-with-javascript/

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: Office HTML Word header

function Export2Doc(element, filename = '') {
  $("#export_btn_word").remove();
  var header = "<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'>" +
    "<head><meta http-equiv='Content-Type' content='text/html;charset=utf-8'><title>Export HTML to Word Document with JavaScript</title></head><body>";
  var footer = "<div style='mso-element:footer' id=f1><p class=MsoFooter><span style='mso-tab-count:1'></span><span style='mso-field-code:\" PAGE \"'></span> </p></div>";
  var end = "</div></body></html>";
  var sourceHTML = header + "<div class='Section1'>" + 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);
}

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;
}

<button id="export_btn_word" onclick="Export2Doc('view_ls_app1_grid_test');">Export as .doc</button>

Please help me out!

来源：https://stackoverflow.com/questions/56800574/html-to-ms-word-conversion-with-header-and-footer-using-javascript

标签

javascript

html

ms-word

converters