js實現word轉換為html
阿新 • • 發佈:2018-11-11
前言
最近接到一個需求,實現上傳一個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, '&') .replace(/"/g, '"') .replace(/</g, '<') .replace(/>/g, '>'); },
缺點:只支援docx的word文件,並且轉換後的標題沒有居中,如圖: