前言

最近接到一個需求，實現上傳一個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

使用方法：

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

使用方法：

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

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

},

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

總結

以上是生活随笔為你收集整理的js把word转html在线预览,js实现word转换为html的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。