9

I have jquery function which exporting html table to word file. Function works great, but I need to rotate a word file to landsacpe orientation. Can somebody help me?

Here is js function:

    <SCRIPT type="text/javascript">
$(document).ready(function () {
    $("#btnExport").click(function () {
        var htmltable= document.getElementById('tblExport');
        var html = htmltable.outerHTML;
        window.open('data:application/msword,' + '\uFEFF' + encodeURIComponent(html));
    });
});
  Response.AddHeader("Content-Disposition", "attachment;filename=myfilename.docx");

3
  • Don't think it's possible as you are not creating a word document from scratch, and just sending the HTML content to response as a word document.
    – Techie
    Mar 31, 2016 at 10:46
  • 1
    @Nimesh - It is possible if you create Word compatible HTML and use MS Office CSS styles.
    – Yogi
    Mar 31, 2016 at 15:16
  • @Martynas Sir did you found a final solution to export .doc file as portrait or landscape and À4 because for the answer below when I open file it is in webpage layout so how can I fix this problem ?
    – ZACK_G
    Jun 21, 2019 at 3:38

1 Answer 1

22

Export HTML to Microsoft Word

You may set page orientation, paper size, and many other properties by including the CSS in the exported HTML. For a list of available styles see MS Office prefixed style properties Some styles have dependencies. For example, to set mso-page-orientation you must also set the size of the page as shown in the code below.

Updated:
Tested with Word 2010-2013 in FireFox, Chrome, Opera, IE10-11. Minor code changes to make work with Chrome and IE10. Will not work with legacy browsers (IE<10) that lack window.Blob object. Also see this SO post if you receive a "createObjectURL is not a function" error: https://stackoverflow.com/a/10195751/943435

Update 2022:
Fixed broken GitHub link

     @page WordSection1{
         mso-page-orientation: landscape;
         size: 841.95pt 595.35pt; /* EU A4 */
         /* size:11.0in 8.5in; */ /* US Letter */
     }
     div.WordSection1 {
         page: WordSection1;
     }

To view a complete working demo see: https://jsfiddle.net/78xa14vz/3/

The Javascript used to export to Word:

 function export2Word( element ) {

   var html, link, blob, url, css;
   
   css = (
     '<style>' +
     '@page WordSection1{size: 841.95pt 595.35pt;mso-page-orientation: landscape;}' +
     'div.WordSection1 {page: WordSection1;}' +
     '</style>'
   );
   
   html = element.innerHTML;
   blob = new Blob(['\ufeff', css + html], {
     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);
 };

And the HTML:

<button onclick="export2Word(window.docx)">Export</button>
<div id="docx">
  <div class="WordSection1">
    
     <!-- The html you want to export goes here -->

  </div>
</div>
11
  • it works great, but I do not have extension of file even when I convert blob to base64 ( i need base64 not an instant download ). could you help me on that ???? May 12, 2017 at 3:46
  • @chournsolidet - Does this help? example
    – Yogi
    May 12, 2017 at 16:56
  • @Roberto its not working for image... have a look on this jsfiddle jsfiddle.net/shamoh19/9zhgnyek
    – ShaMoh
    May 15, 2017 at 6:28
  • @ShaMoh - Unfortunately, Word does not accept data uri images. The easiest solution is to set the image src to an actual url image source (jpg,gif,png). This page might be helpful: Inserting a base64 encoded image into a Word 2016 document
    – Yogi
    May 15, 2017 at 17:36
  • 1
    Roberto, you are brilliant. Thank you. Very pleased that you provided a non-jQuery solution too. Tip for anyone using this - it helps to make the filename something useful. link.download = 'QuizResults<?php echo $quizid;?>'; and if (navigator.msSaveOrOpenBlob ) navigator.msSaveOrOpenBlob( blob, 'QuizResults<?php echo $quizid;?>.doc'); // IE10-11
    – Xaraxia
    Sep 1, 2017 at 0:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.