一：安装环境
npm install mhtml-to-word
二：在文件中引入
三： 详细使用
exportWord(){
let that = this;
var val = that.selectionList; //这个东西的由来看下边图片
val.forEach(item=>{
if(item.type == 0){
item.type = '电台'
}
if(item.type == 1){
item.type = '网络'
}
})
if(val.length>5){
that.$message({
type: 'error',
message: '单次最多只能导出5条数据！'
});
return;
}
var data = {
list:val
}
var model = `
<meta charset="utf-8">
<div style="width: 100%;height:100%;margin: 0 auto;">
<p style="text-align: center;font-size: 18px;">信息登记表</p>
<%for(var i=0;i<list.length;i++){%>
<span style="font-size: 14px;">编号：<%=list[i].number%></span>
<table border="0" cellspacing="1" cellpadding="0" style="width: 100%;margin:0 auto;font-size: 14px;background:#DCDFE6;text-align: center;">
<tr>
<td style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;">编号</td>
<td style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;"><%=list[i].number%></td>
<td style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;">类型</td>
<td style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;"><%=list[i].type%></td>
</tr>
<tr>
<td colspan="4" style="width:25%;height:30px;background:#fff;text-align: left;border-bottom:1px solid #DCDFE6;">详细地址：<%=list[i].address%></td>
</tr>
<tr>
<td style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;">建设时间</td>
<td style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;"><%=list[i].install_date%></td>
<td style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;">维护人员</td>
<td style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;"><%=list[i].main_name%></td>
</tr>
<tr>
<td rowspan="2" style="width:25%;min-height:30px;background:#fff;border-bottom:1px solid #DCDFE6;">坐标</td>
<td style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;">经度</td>
<td style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;">纬度</td>
<td style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;">高程</td>
</tr>
<tr>
<td style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;"><%=list[i].lon%></td>
<td style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;"><%=list[i].lat%></td>
<td style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;"><%=list[i].height%></td>
</tr>
<tr>
<td colspan="4" style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;">所在地相关位置影像图</td>
</tr>
<tr>
<td colspan="2" style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;">外部照片</td>
<td colspan="2" style="width:25%;height:30px;background:#fff;border-bottom:1px solid #DCDFE6;">内部设备照片</td>
</tr>
<tr>
<td colspan="2" style="width:25%;height:100px;background:#fff;border-bottom:1px solid #DCDFE6;"><img src="<%=list[i].photo1%>" width="100" height="100"></td>
<td colspan="2" style="width:25%;height:100px;background:#fff;border-bottom:1px solid #DCDFE6;"><img src="<%=list[i].photo2%>" width="100" height="100"></td>
</tr>
</table>
<%}%>
</div>
`
var html = baidu.template(model,data)
exportWord({
mhtml: html,
data: {title: "BSMsg"},
filename: "BSMsg",
style: "span{ font-size:30px; }"
})
},
效果：
