在web端预览word文档，可以使用iframe来实现。但由于兼容性问题，并不能使用iframe在安卓和ios上预览文件
经测试发现，mammoth插件可以实现该功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title id="title"></title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/mammoth/1.4.16/mammoth.browser.min.js"></script>
</head>
<body>
<div id="example">
</div>
<script>
//data 是word文档的地址
function preview(data){
// var url = data
// var xhr=new XMLHttpRequest();
// xhr.open('GET', url);
// xhr.responseType='arraybuffer';
// xhr.onreadystatechange=function (){
// if(this.readyState==4){
// if(this.status==200){
// var arrayBuffer=this.response;
// mammoth.convertToHtml({arrayBuffer: arrayBuffer})
// .then((res)=>{
// document.getElementById('message').innerHTML = res.value
// let obj = document.getElementById('message').children
// for(let i = 0;i<obj.length;i++){
// obj[i].style.color="#333"
// obj[i].style.fontSize="0.7rem"
// }
// }).done();
// } else {
// console.log(this.status);
// }
// }
// }
// xhr.send();
axios({method:'get',url:data,responseType:'arraybuffer'}).then(res=> {
if(res.status==200){
//将文件转成arrayBuffer格式
var arrayBuffer=res.data
mammoth.convertToHtml({arrayBuffer: arrayBuffer})
.then((res)=>{
document.getElementById('message').innerHTML = res.value
let obj = document.getElementById('message').children
//动态修改样式
for(let i = 0;i<obj.length;i++){
obj[i].style.color="#333"
obj[i].style.fontSize="0.7rem"
}
}).done();
}
}).catch(e => {console.log(e)})
}
</script>
</body>
</html>