Uno: entorno de instalación
npm instalar mhtml-to-word
Dos: introducir en el archivo
Tres: uso detallado
exportWord () { let that = this; var val = that.selectionList; // Mira la siguiente imagen para ver el motivo
val.forEach (item => { if (item.type == 0) { item.type = 'Radio' } if (item.type == 1) { item.type = 'Network' } }) if (val. length> 5) { that. $ message ({ type: 'error', message: '¡Solo puedes exportar 5 datos a la vez!' }); return; } var data = { list: val } var model = ` <meta charset =" utf-8 "> <div style =" ancho: 100%; alto: 100%; margen: 0 automático; "> <p style ="text-align: center; font-size: 18px; "> Formulario de registro de información </p>
<% para (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 ; borde inferior: 1px sólido # 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- abajo: 1px sólido # 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 sólido # DCDFE6; "> <% = list [i] .lon%> </td>
<td style =" ancho: 25%; alto: 30px; fondo: #fff; borde inferior: 1px sólido # DCDFE6; "> <% = list [i] .lat%> </td>
<td style =" width: 25%; height: 30px; background: #fff; border-bottom: 1px solid # DCDFE6; "> <% = lista [i] .height%> </td>
</tr>
<tr>
<td colspan = "4" style = "width: 25%; height: 30px; background: #fff; border-bottom: 1px solid # DCDFE6;"> Mapa de imagen de ubicación relacionada con la ubicación </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 (modelo, datos)
exportWord ({ mhtml: html, data: {title: "BSMsg"}, nombre de archivo: "BSMsg", estilo: "span {font-size: 30px;}" }) } ,
efecto:
