Is it possible to create a Word document from JavaScript that contains 2 differently oriented pages (in the same document)? I.e. 1st page = portrait, 2nd page = landscape? This is pretty much exactly what I am after. I have tried so many things.. such as mso-break-type:section-break; mso-special-character:line-break; page-break-before:always; etc. but no luck. Thank you in advance! Here is what i have so far:
<script>
function export_to_word() {
var link, blob, url;
blob = new Blob(['\ufeff', document.getElementById("docx").innerHTML], {
type: 'application/msword'
});
url = URL.createObjectURL(blob);
link = document.createElement('A');
link.href = url;
link.download = 'Document'; // default name without extension
document.body.appendChild(link);
if (navigator.msSaveOrOpenBlob )
navigator.msSaveOrOpenBlob( blob, 'Document.doc'); // IE10-11
else link.click(); // other browsers
document.body.removeChild(link);
};
</script>
<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>
<button onclick="export_to_word()">Export</button>
<div id="docx">
<style>
@page portrait_A4_page {
size:595.45pt 841.7pt;
margin:1.0in 1.25in 1.0in 1.25in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:0;
}
div.portrait_A4_page { page:portrait_A4_page; }
@page landscape_A4_page {
size:841.7pt 595.45pt;
mso-page-orientation: landscape;
margin:1.25in 1.0in 1.25in 1.0in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:0;
}
div.landscape_A4_page { page:landscape_A4_page; }
</style>
<div class=portrait_A4_page>
<p>standard A4 portrait page information</p>
</div>
<div class=landscape_A4_page>
<table border=1>
<tr>
<td>a table that goes really wide</td>
</tr>
</table>
</div>
</div>
Found solution! The code below changes from portrait (page 1) to landscape (page 2) in the same JavaScript generated Word document. It could probably be simplified further, but this works:
<script>
function export_to_word() {
var link, blob, url;
blob = new Blob(['\ufeff', document.getElementById("docx").innerHTML], {
type: 'application/msword'
});
url = URL.createObjectURL(blob);
link = document.createElement('A');
link.href = url;
link.download = 'Document'; // default name without extension
document.body.appendChild(link);
if (navigator.msSaveOrOpenBlob )
navigator.msSaveOrOpenBlob( blob, 'Document.doc'); // IE10-11
else link.click(); // other browsers
document.body.removeChild(link);
};
</script>
<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>
<button onclick="export_to_word()">Export</button>
<div id="docx">
<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;
}
@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;
}
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;
}
div.landscape_A4_page { page:landscape_A4_page; }
</style>
<div class=portrait_A4_page>
<span class=normal>
<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 class=normal>
<tr>
<td>a table that goes really wide</td>
</tr>
</table>
</div>
</div>