Skip to content

Instantly share code, notes, and snippets.

@AbrahamSalloum
Created September 10, 2023 01:53
Show Gist options
  • Save AbrahamSalloum/9ed922762211dd0e0dc8c52159981a19 to your computer and use it in GitHub Desktop.
Save AbrahamSalloum/9ed922762211dd0e0dc8c52159981a19 to your computer and use it in GitHub Desktop.
<html xmlns:office="urn:schemas-microsoft-com:office:office"
xmlns:word="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
<br>
<style>
table, tr, td, th{
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
text-align: left;
}
.normal {
font-family:"Calibri",sans-serif;
line-height:107%;
font-size:11.0pt;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
}
.hdiv {
/* background-color: red; */
height: 150px;
border: 1px solid black;
background-color:cadetblue;
}
@page portrait_A4_page {
size:595.3pt 841.9pt;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
mso-header: h1;
mso-footer: f1;
}
div.portrait_A4_page { page:portrait_A4_page; }
@page landscape_A4_page {
size:841.9pt 595.3pt;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.45pt;
mso-footer-margin:35.45pt;
mso-paper-source:0;
mso-header: h1;
mso-footer: f1;
}
div.landscape_A4_page { page:landscape_A4_page; }
p.headerFooter { margin:0in; text-align: center; }
</style>
<div class="portrait_A4_page hdiv">
<table style='margin-left:50in;'><tr style='height:1pt;mso-height-rule:exactly'>
<td>
<div style='mso-element:header' id=h1>
<p class=headerFooter>
Header content goes here
</p>
</div>
&nbsp;
</td>
<td>
<div style='mso-element:footer' id=f1>
<p class=headerFooter>
Page
<span style='mso-field-code:PAGE'></span>
of
<span style='mso-field-code:NUMPAGES'></span>
</p>
</div>
&nbsp;
</td></tr></table>
<span class=normal>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAACACAIAAADyNUZcAAADwUlEQVR4nOzdz4snchzH8f2O75JsmERSm20ujM1J1Go1B8VBDn6l1H5trdqyDuxeRkopZUSjKC6aKUWJUqKmaZqpMXIgpjBDislIxDQO5ib8Ee/Du2+vx+MvePW5PHufPsMz0zOHxtn183PdE0o+PfZK94SSh96b6p5QcnjmoHtCyW1r473/qd+v655Qcu2pj7onlEx0DwCghwAAhBIAgFACABBKAABCCQBAKAEACCUAAKEEACCUAACEEgCAUAIAEEoAAEIJAEAoAQAINbzqk8u7N5QsX/Fy94SS20dPdE8ouf+DB7onlBx958HuCSX3HTvfPaFkZXWte0LJw4e/7Z5Q4gIACCUAAKEEACCUAACEEgCAUAIAEEoAAEIJAEAoAQAIJQAAoQQAIJQAAIQSAIBQAgAQSgAAQg1++Pzm7g0ld3482T2h5Jm7xvv9v5ne6Z5QMvPd890TSk6uXN09oeT0TeP9H8CXbx7tnlDiAgAIJQAAoQQAIJQAAIQSAIBQAgAQSgAAQgkAQCgBAAglAAChBAAglAAAhBIAgFACABBKAABCDTbu2e7eULJ/6fHuCSUL2993Tyh56dGN7gkldyy/3j2hZGFxqXtCycTcNd0TSiaf/KJ7QokLACCUAACEEgCAUAIAEEoAAEIJAEAoAQAIJQAAoQQAIJQAAIQSAIBQAgAQSgAAQgkAQCgBAAg1+OzWqe4NJZt3b3ZPKJn885HuCSVvzN7bPaHkwkV/dE8oueSyv7snlJw4Od7v/9/ibveEEhcAQCgBAAglAAChBAAglAAAhBIAgFACABBKAABCCQBAKAEACCUAAKEEACCUAACEEgCAUAIAEGq4fuJI94aS4aFR94SSt7/6sHtCyavv/ts9oeSx3053Tyg5O1jtnlBz5OfuBSWPnzrfPaHEBQAQSgAAQgkAQCgBAAglAAChBAAglAAAhBIAgFACABBKAABCCQBAKAEACCUAAKEEACCUAACEGk4s39C9oWT16V+7J5SMLp7vnlDy3I/vd08oeeHcX90TSvZunO6eUPLTs9vdE0q+PvdP94QSFwBAKAEACCUAAKEEACCUAACEEgCAUAIAEEoAAEIJAEAoAQAIJQAAoQQAIJQAAIQSAIBQAgAQarC7td69oWT24MruCSUvjs50TyjZn7rQPaHkreOL3RNKbtk/2z2hZGvnte4JJXu/LHVPKHEBAIQSAIBQAgAQSgAAQgkAQCgBAAglAAChBAAglAAAhBIAgFACABBKAABCCQBAKAEACCUAAKH+DwAA//9L5l+8olC5AgAAAABJRU5ErkJggg==">
<p>standard A4 portrait page information</p>
</span>
<br clear=all style='mso-special-character:line-break; page-break-before:always'>
</div>
<br clear=all style='page-break-before:always; mso-break-type:section-break'>
<div class="landscape_A4_page">
<table style='margin-left:50in;'><tr style='height:1pt;mso-height-rule:exactly'>
<td>
<div style='mso-element:header' id=h1>
<p class=headerFooter>
<table cellspacing="0" cellpadding="0" style="border:none;">
<tr style="border:none;">
<td style="border:none;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAABACAIAAABdtOgoAAABHklEQVR4nOzTsWkCARhH8UtyRZqDg3RJmwGuTKpkgKQRO5dwAMFCXMMFrhcOFStBENurLB1CLMQRrP685v0G+H/F4yv/9k2RVC376P5g/Bvdv52r6P5zdF0PGQBmAJgBYAaAGQBmAJgBYAaAGQBmAJgBYAaAGQBmANjTsDlGD/y/r6L7o/onuv/2sY7u+wEwA8AMADMAzAAwA8AMADMAzAAwA8AMADMAzAAwA8AMACs/vzfRA237Et2ffc2j+9vuNbrvB8AMADMAzAAwA8AMADMAzAAwA8AMADMAzAAwA8AMADMArDwUp+iBfrKI7l+6a3R/uquj+34AzAAwA8AMADMAzAAwA8AMADMAzAAwA8AMADMAzAAwA8DuAQAA//9PPxckCVsLugAAAABJRU5ErkJggg==">
</td>
<td style="border:none; width:100%;">Blah</td>
<td style="border:none;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAABACAIAAABdtOgoAAAAzElEQVR4nOzTMQ3CUABFUSAIYcAHCSszVVM/dVAb1VAnFfGHk6b3KHjJzXvO6/92Zu/XoicMeegBV1cArABYAbACYAXACoAVACsAVgCsAFgBsAJgBcAKgBUAKwBWAKwAWAGwAmAFwAqAFQArAFYArABYAbACYAXACoDdt2nXG4Z8vj89YUgPwAqAFQArAFYArABYAbACYAXACoAVACsAVgCsAFgBsAJgBcAKgBUAKwBWAKwAWAGwAmAFwAqAFQArAFYArABYAbAjAAD//zqDBcZt3PwFAAAAAElFTkSuQmCC">
</td>
</tr>
</table>
</p>
</div>
&nbsp;
</td>
<td>
<div style='mso-element:footer' id=f1>
<p class=headerFooter>
Page
<span style='mso-field-code:PAGE'></span>
of
<span style='mso-field-code:NUMPAGES'></span>
</p>
</div>
&nbsp;
</td></tr></table>
<table class=normal>
<tr>
<td>https://stackoverflow.com/questions/13340216/html-generated-microsoft-word-document-with-header-footer-and-watermark</td>
</tr>
</table>
<br clear=all style='mso-special-character:line-break; page-break-before:always'>
</div>
<br clear=all style='page-break-before:always; mso-break-type:section-break'>
<div class="portrait_A4_page">
<table style='margin-left:50in;'><tr style='height:1pt;mso-height-rule:exactly'>
<td>
<div style='mso-element:header' id=h1>
<p class=headerFooter>
Header content goes here
<div class="hdiv">
<p>Abraham</p>
<p>Abraham</p>
<p>Abraham</p>
<p>Abraham</p>
</div>
</p>
</div>
&nbsp;
</td>
<td>
<div style='mso-element:footer' id=f1>
<p class=headerFooter>
Page
<span style='mso-field-code:PAGE'></span>
of
<span style='mso-field-code:NUMPAGES'></span>
</p>
</div>
&nbsp;
</td></tr></table>
<span class=normal>
<p>https://stackoverflow.com/questions/52436582/how-do-i-generate-a-word-document-from-javascript-with-changing-page-orientation</p>
https://yulvil.github.io/gopherjs/02/
</span>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment