Export contents inside <div> as a .docx File

Question

I am having trouble exporting the contents of a div into a .docx file. I am using FileSaver.js which can be found here: https://github.com/eligrey/FileSaver.js/.

My JavaScript Function:

function exportNote(){
   var blob = new Blob([document.getElementById('editor').innerHTML], {
      type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8"
   });
   saveAs(blob, "note.docx");
}

I get a download that appears to be a word file but when I open it I get the following error:

The Open XML file note.docx cannot be opened because there are problems with the contents or the file name might contain invalid characters (for example. /).

Details: The file is corrupt and cannot be opened.

For graphical purposes:

The text area is the area I am trying to export into a word document which is under <div id="editor"></div>.

Answer 1

jsfiddle

Html

<div id="main">
 this is content of div
</div>

JavaScript

function downloadInnerHtml(filename, elId) {
 var elHtml = document.getElementById(elId).innerHTML;
 var link = document.createElement('a');
 link.setAttribute('download', filename);   
 link.setAttribute('href', 'data:' + 'text/doc' + ';charset=utf-8,' + encodeURIComponent(elHtml));
 link.click(); 
}
var fileName =  'tags.doc'; // You can use the .txt extension if you want
downloadInnerHtml(fileName, 'main');

Answer 2

There is another solution to this problem using an open source library on github under the MIT license: https://github.com/evidenceprime/html-docx-js.

My solution:

function exportNote(contentId){
   var filename = 'note.html'
   var htmlDoc = document.getElementById(contentId).innerHTML;
   var converted = htmlDocx.asBlob(htmlDoc);
   saveAs(converted, "notes.docx");
}