How do i generate a Word Document from JavaScript with changing page orientations? (portrait to landscape)

user_9360058 0
Viewed 5347

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>
portrait landscape ms-office ms-word javascript
1 Answers

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>
user_93600580
Related