js實現word轉換爲html

前言

最近接到一個需求，實現上傳一個word文檔，然後將該word轉換成html丟給服務端存上。進行技術調研後發現有三種方法可以實現這個功能：ActiveXObject、docx2html、mammoth。

IE的 ActiveXObject

    var oWordApp=new   ActiveXObject("Word.Application");      
    var oDocument=oWordApp.Documents.Open("C://test.doc");      
    oDocument.SaveAs("C://test.html", 10)     

缺點：只有IE纔有這個東西

docx2html

Git地址：https://github.com/lalalic/docx2html

使用方法：

// html 部分
<input type="file" @change="handleFileSelect">
<textarea id="text"></textarea>

// js部分
handleFileSelect(event){
    require("docx2html")(event.target.files[0]).then(function(converted){
        console.log(converted)
        document.querySelector('textarea').value=converted.toString()
    })
}

缺點：只能將簡單的docx文件轉化成html，複雜點的就報錯了，如圖：

mammoth.js

Git地址：https://github.com/mwilliamson/mammoth.js

中文文檔地址：https://www.helplib.com/GitHub/article_106969

使用方法：

    //html：部分
    <div class="container">
      <input id="document" type="file" @change="handleFileSelect" />
      <div class="row">
        <div class="span8">
          <div id="output" class="well">
          </div>
        </div>
        <div class="span4">
          <h3>Messages</h3>
          <div id="messages">
          </div>
        </div>
    </div>
    </div>
    
    //js：部分
    handleFileSelect(event) {
        this.readFileInputEventAsArrayBuffer(event,  (arrayBuffer) => {
            mammoth.convertToHtml({arrayBuffer: arrayBuffer})
                .then(this.displayResult)
                .done();
        });
    },

    displayResult(result) {
        console.log(result)
        document.getElementById("output").innerHTML = result.value;

        var messageHtml = result.messages.map((message) => {
            return '<li class="' + message.type + '">' + this.escapeHtml(message.message) + "</li>";
        }).join("");

        document.getElementById("messages").innerHTML = "<ul>" + messageHtml + "</ul>";
    },

    readFileInputEventAsArrayBuffer(event, callback) {
        var file = event.target.files[0];

        var reader = new FileReader();

        reader.onload = function(loadEvent) {
            var arrayBuffer = loadEvent.target.result;
            callback(arrayBuffer);
        };

        reader.readAsArrayBuffer(file);
    },

    escapeHtml(value) {
        return value
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    },

缺點：只支持docx的word文檔，並且轉換後的標題沒有居中，如圖：