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, '&')
.replace(/"/g, '"')
.replace(/</g, '<')
.replace(/>/g, '>');
},
缺点:只支持docx的word文档,并且转换后的标题没有居中,如图:
关注公众号:【前端欧阳】,解锁我更多vue
干货文章,并且可以免费向我咨询vue
相关问题。