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");

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
Martynas Tumas
  • 256
  • 1
  • 5
  • 14
  • 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 '16 at 10:46
  • 1
    @Nimesh - It is possible if you create Word compatible HTML and use MS Office CSS styles. – Yogi Mar 31 '16 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 '19 at 03:38

1 Answers1

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>
Yogi
  • 6,241
  • 3
  • 24
  • 30
  • 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 ???? – chourn solidet May 12 '17 at 03:46
  • @chournsolidet - Does this help? [example](https://jsfiddle.net/mtjtym9t/) – Yogi May 12 '17 at 16:56
  • @Roberto its not working for image... have a look on this jsfiddle https://jsfiddle.net/shamoh19/9zhgnyek/ – ShaMoh May 15 '17 at 06: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](https://xomino365.com/2016/05/01/inserting-a-base64-encoded-image-into-a-word-2016-document/) – Yogi May 15 '17 at 17:36
  • @Roberto I also have implemented this way, but what if I need an array of tables ? it means one table gives one base64 data. so, are there any problems when we have onloadend for multiple blobs ???? This is my concern since I have experience with loading multiple images by canvas (first image is loading then the second comes and replaces). And it makes an unexpected result. – chourn solidet May 16 '17 at 01:21
  • @Roberto I have tried that as well by pointing image in source. It also dint work – ShaMoh May 16 '17 at 04:07
  • @ShaMoh - Sorry, I did not see any change. Yet, maybe this will help you: [jsfiddle](https://jsfiddle.net/0ue4xxz8/) – Yogi May 17 '17 at 19:43
  • @chournsolidet - Suggest posting as a new question. It is an interesting problem. – Yogi May 17 '17 at 19:48
  • @Roberto I deal with it by using time interval, but I am not sure if it is reliable. It works on my local env but used to have problem on production. – chourn solidet May 18 '17 at 02:19
  • 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'; and if (navigator.msSaveOrOpenBlob ) navigator.msSaveOrOpenBlob( blob, 'QuizResults.doc'); // IE10-11 – Xaraxia Sep 01 '17 at 00:54
  • @Roberto I am really grateful for your solution to export `html` as `.doc` but when I open `.doc` file it shows up as `webpage layout` not `landscape` or `A4` so how can I fix this problem ? – ZACK_G Jun 20 '19 at 23:51