前言
最近接到一个需求,实现上传一个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》对你有帮助,请点赞、收藏,并留下你的观点哦!