前端HTML转word文档，绝对有效！！！

2024.4.19 更新日志：有小伙伴私信我element-ui等ui插件等复杂样式无法转换生成，考虑到

html-docx-js本身不支持大多c3样式及标签，先提供解决方法将dom转成图片插入文档中，只需要用标签盒子 包裹住 你需要生成的dom模块，给标签盒子添加类目标识，配置项中传入 drawCanvas:[‘ .btn’ ] ，就可以生成 具体效果图结尾有。

2024.3.11 更新日志 ：允许使用class标签在html模版中使用 此前只支持行内标签修改样式 过于繁琐与不便 ，配置项中加入 className: “xxx”, 当前模版的class类明即可识别使用

公司有业务需求 需要将前端页面一键导出word模版

后来找了半天只找到一个16年的插件html-docx-js（膜拜大神，但是已经无人维护了） ，使用后踩了许多坑，因为js版本兼容问题，运行都报错使用了with() 先版本不兼容，使用也比较繁琐，

最无法容忍的是如果是使用的在线图片还有跨域问题导致图片无法导出！！！

所以直接做了些优化处理 主要是对超时 错误图片处理 可以传入导出图片超时时间等等系列问题坑！！！已封装成傻瓜式一键导出插件，小伙伴可以放心食用，目前已投入公司项目中使用。

xh-htmlword

使用方法

npm install xh-htmlword

  
    
    

      深水汴北配套管网运维日报表
    
    

      
        
        
        
        
        
        
      
      
      

        

          
            {{ item2.title }}
          
            {{ item2.label }}
          
        
      
      
      

        

          
            到岗人员：
 
          
             
            {{ item.title }}
            
              {{ item.label }}
            
          
        
      
      
      

        

          
            标准化执行情况：
          
            
            {{ data.execution == index ? "√" : "□" }}
            
              {{ item }}
            
          
        
      
      
      

        

          巡检记录
        
      
      

        

          
        
      
    
 
    
      
      
      
      
      
 
      
        
        
        
      
    
  
 
  导出

 

导出效果如下:

可以看到了element UI的组件也一起导出在最下方，项目是采用的vue3+vite，实际中vue2我试了也是没问题的，插件注意事项和使用方法可以去xh-htmlword查看，如果有使用疑惑或问题可以加我QQ:1031945252 交流联系，共同进步

注意：如果是使用的vue2版本，报了以下错误：

一定要在vue.config.js中加上配置项：

会转译node_modules中的包，解决报错！