Question

我无法将div的内容导出到 .docx 文件中。我正在使用 FileSaver.js ，可在此处找到：https://github.com/eligrey/FileSaver.js/。

我的JavaScript功能：

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

我得到一个似乎是word文件的下载但是当我打开它时出现以下错误：

无法打开Open XML文件note.docx，因为       内容或文件名有问题       可能包含无效字符（例如./).

详细说明：       该文件已损坏，无法打开。

出于图形目的：

文本区域是我尝试导出到<div id="editor"></div>下的word文档的区域。

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

在麻省理工学院许可下使用github上的开源库还有另一种解决方案：https://github.com/evidenceprime/html-docx-js。

我的解决方案：

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

Answer 3

ZACK_G 解决方案对我有用，不需要额外的外部脚本。 https://www.w3schools.com/code/tryit.asp?filename=G59ZWYISOV4O

Answer 4

由于有人在评论中遇到问题，我将粘贴我正在使用的内容。我在此处粘贴的函数非常接近此站点的逐字记录：https://www.codexworld.com/export-html-to-word-doc-docx-using-javascript/

感谢他们。关键是将 div 的内容保存到文件不是一个正确的 HTML 文档，这会导致 Word 犹豫不决。它需要一个 BODY、HTML 和一些 xmlns 属性。在进行实际保存之前，此函数获取 innerHtml 并将其包装起来。

只需使用包含要保存的内容的元素的名称和文件名调用 Export2Word()：

Export2Word('divMyContent','MyFileNameWithoutExtension');

function Export2Word(element, filename = ''){
    var preHtml = "<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><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>";
    var postHtml = "</body></html>";
    
    var content = document.getElementById(element).innerHTML;

    var html = preHtml+content+postHtml;

    var blob = new Blob(['\ufeff', html], {
        type: 'application/msword'
    });
    
    // Specify link url
    var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
    
    // Specify file name
    filename = filename?filename+'.docx':'document.docx';
    
    // Create download link element
    var downloadLink = document.createElement("a");

    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob ){
        navigator.msSaveOrOpenBlob(blob, filename);
    }else{
        // Create a link to the file
        downloadLink.href = url;
        
        // Setting the file name
        downloadLink.download = filename;
        
        //triggering the function
        downloadLink.click();
    }
    
    document.body.removeChild(downloadLink);
}

将<div>内的内容导出为.docx文件

4 个答案: