Export contents inside <div> as a .docx File

五迷三道 提交于 2019-12-21 21:15:22

问题


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>.


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



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


来源:https://stackoverflow.com/questions/36575093/export-contents-inside-div-as-a-docx-file

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!