Skip to content

Instantly share code, notes, and snippets.

@dcondrey
Created August 5, 2017 22:29
Show Gist options
  • Save dcondrey/c24afe30a1adb685eb184b6b1a2fe5d9 to your computer and use it in GitHub Desktop.
Save dcondrey/c24afe30a1adb685eb184b6b1a2fe5d9 to your computer and use it in GitHub Desktop.
Export an HTML element to Microsoft Word with CSS styles to set page orientation and paper size.
/* HTML to Microsoft Word Export
* This code demonstrates how to export an html element to Microsoft Word
* with CSS styles to set page orientation and paper size.
* Tested with Word 2010, 2013 and FireFox, Chrome, Opera, IE10-11
* Fails in legacy browsers (IE<10) that lack window.Blob object
*/
function saveDoc() {
if (!window.Blob) {
alert('Your legacy browser does not support this action.');
return;
}
var html, link, blob, url, css;
// EU A4 use: size: 841.95pt 595.35pt;
// US Letter use: size:11.0in 8.5in;
css = ('\
<style>\
@page WordSection1{size: 841.95pt 595.35pt;mso-page-orientation: portrait;}\
div.WordSection1 {page: WordSection1;}\
h1 {font-family: "Times New Roman", Georgia, Serif; font-size: 16pt;}\
p {font-family: "Times New Roman", Georgia, Serif; font-size: 14pt;}\
</style>\
');
var rightAligned = document.getElementsByClassName("sm-align-right");
for (var i=0, max=rightAligned.length; i < max; i++) {
rightAligned[i].style = "text-align: right;"
}
var centerAligned = document.getElementsByClassName("sm-align-center");
for (var i=0, max=centerAligned.length; i < max; i++) {
centerAligned[i].style = "text-align: center;"
}
html = document.getElementById('text').innerHTML;
html = '\
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">\
<head>\
<title>Document Title</title>\
<xml>\
<w:worddocument xmlns:w="#unknown">\
<w:view>Print</w:view>\
<w:zoom>90</w:zoom>\
<w:donotoptimizeforbrowser />\
</w:worddocument>\
</xml>\
</head>\
<body lang=RU-ru style="tab-interval:.5in">\
<div class="Section1">' + html + '</div>\
</body>\
</html>'
blob = new Blob(['\ufeff', css + html], {
type: 'application/msword'
});
url = URL.createObjectURL(blob);
link = document.createElement('A');
link.href = url;
filename = 'filename';
// Set default file name.
// Word will append file extension - do not add an extension here.
link.download = filename;
document.body.appendChild(link);
if (navigator.msSaveOrOpenBlob) {
navigator.msSaveOrOpenBlob( blob, filename + '.doc'); // IE10-11
} else {
link.click(); // other browsers
}
document.body.removeChild(link);
};
@blindibrasil
Copy link

blindibrasil commented Oct 11, 2019

How to set the margin of the <p></p> element?
Because I've tried in many ways using styles and couldn't, it always returns with the spacing between the default paragraphs of 0.5cm.
I thank you for your help.

@danilcostefanovski
Copy link

Is there an option to save to docx?

@jduysen
Copy link

jduysen commented Aug 13, 2021

Hey, this works great to get html to doc, but I am only able to get the raw html styles, no custom styles. Is there a trick to get my HTML styles into word?

@CarlaMck77
Copy link

Hey, this works great to get html to doc, but I am only able to get the raw html style s, no custom styles. Is there a trick to get my HTML styles into word?

Did you resolve this? I have the same issue

@jduysen
Copy link

jduysen commented Feb 1, 2023

Carla, sorry for the slow reply. No, I settled for the default styles, wasn't able to spend any more time on it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment