前言

最近接到一个需求，实现上传一个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 部分

// 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：部分

Messages

//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 '

' + this.escapeHtml(message.message) + "";

}).join("");

document.getElementById("messages").innerHTML = "" + messageHtml + "";

},

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, '&')

.replace(/"/g, '"')

.replace(//g, '>');

},

缺点：只支持docx的word文档，并且转换后的标题没有居中，如图：