导出图片到word文档

一：安装环境

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; }"
})
      },

效果：