Export contents inside <div> as a .docx File

javascript html export filesaver.js

10,164

Solution 1

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

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

10,164

Author by

btald1331

I am a Software Developer working for a 911 Telecom company.

Updated on June 04, 2022

Comments

btald1331 almost 2 years
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>.
Ron Daulagupu almost 5 years

Exactly what I was looking for. To download as docx, just change doc to docx. This should be the accepted answer.
ZACK_G almost 5 years

@RonDaulagupu how did this script function with docx because when I change extention from doc to docx and opened file . It shows this message " the file cannot be opened because there are problems with the contents." the docx is not working so how did you make it work ?
Ron Daulagupu almost 5 years

@ZACK_G I just changed text/doc to text/docx and filename to eg. tags.docx. is your data content corrupted. Check whether you are saving correctly.
ZACK_G almost 5 years

@RonDaulagupu I am really grateful for your help but the script export plain text only not html as you can see jsfiddle and I already found a solution on internet the export html text with original fomatting script but the problem the doc file is in webpage layout so how can I combine both solution to export html text is original formatting and with portrait orentation and A4 size .Or there is any solution that can do it all ? and thanks for your help .
Ken Forslund almost 3 years

This was close, but I got the error in Word about corrupted file. It looks like we need some special tags before and after the main content. var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>"; var postHtml = "</body></html>"; var html = preHtml+document.getElementById(element).innerHTML+postHtml; Found a working example: codexworld.com/export-html-to-word-doc-docx-using-javascript
formicini over 2 years

@KenForslund I tried that but the file is still corrupted.
Ken Forslund over 2 years

Since we know we're really making an html file, have you examined it in notepad to make sure it has the proper pre and post tagging before the main content? I got it to work pretty easily from that URL in my prior answer. If I get time later today, I'll try to collect my code and make a proper answer so you have the whole thing.