export html table as word file and change file orientation
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>
Martynas Tumas
Updated on July 25, 2022Comments
-
Martynas Tumas almost 2 years
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");
-
chourn solidet almost 7 yearsit 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 ????
-
Yogi almost 7 years@chournsolidet - Does this help? example
-
ShaMoh almost 7 years@Roberto its not working for image... have a look on this jsfiddle jsfiddle.net/shamoh19/9zhgnyek
-
Yogi almost 7 years@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
-
chourn solidet almost 7 years@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.
-
ShaMoh almost 7 years@Roberto I have tried that as well by pointing image in source. It also dint work
-
Yogi almost 7 years@ShaMoh - Sorry, I did not see any change. Yet, maybe this will help you: jsfiddle
-
Yogi almost 7 years@chournsolidet - Suggest posting as a new question. It is an interesting problem.
-
chourn solidet almost 7 years@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.
-
Xaraxia over 6 yearsRoberto, 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
-
ZACK_G almost 5 years@Roberto I am really grateful for your solution to export
html
as.doc
but when I open.doc
file it shows up aswebpage layout
notlandscape
orA4
so how can I fix this problem ?