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-htmlwordtemplate div classexport-box stylewidth: 565pt div idmain1/div p styletext-align: center span style font-family: 宋体; font-weight: bold; color: rgb(0, 0, 0); min-height: 16pt; font-size: 16pt; 深水汴北配套管网运维日报表/span /p table stylewidth: 565pt; border-collapse: collapse; border: 1px solid #dddddd colgroup col stylewidth: 89.65pt / col stylewidth: 44.05pt / col stylewidth: 121.5pt / col stylewidth: 103.85pt / col stylewidth: 73.3pt / col stylewidth: 106.3pt / /colgroup !-- 头部 -- tr v-for(item, index) in data.head :keyindex styleborder: 1px solid #cccccc; height: 25.5pt td v-for(item2, index) in item :keyindex stylepadding-left: 5.4pt; border: 1px solid #cccccc :style{ width: item2.width } :colspanindex % 2 0 ? 2 : 1 span style font-weight: bold; color: #595959; font-size: 9pt; margin-right: 3pt; {{ item2.title }}/span span stylecolor: #595959; font-size: 9pt {{ item2.label }} /span /td /tr !-- 到岗人员 -- tr styleborder: 1px solid #cccccc; height: 25.5pt td colspan6 stylepadding-left: 5.4pt; border: 1px solid #cccccc span style font-weight: bold; color: #595959; font-size: 9pt; margin-right: 3pt; 到岗人员/span span v-for(item, index) in data.personnel :keyindex stylecolor: #595959; font-size: 9pt span v-ifindex ! 0 nbsp;/span span{{ item.title }}/span span {{ item.label }} /span /span /td /tr !-- 标准化执行情况 -- tr styleborder: 1px solid #cccccc; height: 25.5pt td colspan6 stylepadding-left: 5.4pt; border: 1px solid #cccccc span style font-weight: bold; color: #595959; font-size: 9pt; margin-right: 3pt; 标准化执行情况/span span v-for(item, index) in executionList :keyindex stylecolor: #595959; font-size: 9pt span v-ifindex ! 0nbsp;nbsp;nbsp;/span span{{ data.execution index ? √ : □ }}/span span {{ item }} /span /span /td /tr !-- 巡检记录 -- tr styleborder: 1px solid #cccccc; height: 36pt td colspan6 style text-align: center; border: 1px solid #cccccc; background-color: #f1f1f1; color: rgb(89, 89, 89); font-size: 14pt; letter-spacing: 1pt; 巡检记录 /td /tr tr td colspan6 style text-align: center; border: 1px solid #cccccc; background-color: #f1f1f1; color: rgb(89, 89, 89); font-size: 14pt; letter-spacing: 1pt; img srchttps://gimg2.baidu.com/image_search/srchttp%3A%2F%2Fimage109.360doc.com%2FDownloadImg%2F2021%2F04%2F0713%2F219519055_1_20210407012803425referhttp%3A%2F%2Fimage109.360doc.comapp2002sizef9999,10000qa80n0g0nfmtauto?sec1716081866taf941e4f60f743e1081f7cda8fcfb299 width565pt height200pt / /td /tr /table div classbtn el-progress :percentage50 / el-progress :percentage100 :formatformat / el-progress :percentage100 statussuccess / el-progress :percentage100 statuswarning / el-progress :percentage50 statusexception / el-steps stylemax-width: 600px :active0 finish-statussuccess el-step titleStep 1 / el-step titleStep 2 / el-step titleStep 3 / /el-steps /div /div button clickhandleExport导出/button /template script setup import { onMounted, nextTick } from vue; import handleExportWord from xh-htmlword; // 标准化执行情况 const executionList [优秀, 良好, 中等, 差]; // 巡检记录 const data { head: [ [ { title: 作业日期, label: 2024年01月25日, width: 150pt }, { title: 填表人, label: 吴宇、白阳, width: 110pt }, { title: 运维单位, label: 安徽中益达管道疏通有限公司, width: 200pt, }, { title: 天气, label: 多云24°C, width: 120pt }, ], [ { title: 现场负责人, label: 吴宇, width: 150pt, }, { title: 手机号码, label: 13112345678, width: 110pt, }, { title: 项目负责人, label: 吴宇, width: 205pt, }, { title: 手机号码, label: 13198765432, width: 120pt, }, ], ], personnel: [ { title: 安全员:, label: 1人, }, { title: 监护人员:, label: 1人, }, { title: 施工人员:, label: 3人, }, { title: 巡查人员:, label: 2人, }, { title: 潜水员:, label: 1人, }, { title: 有限空间作业人员:, label: 1人, }, ], execution: 1, }; const handleExport () { // dom需要渲染的html父盒子标签 类型string 例如 id/class // fileName文件名称 类型string // timeOut:设置导出图片加载 超时时间 默认值 5000 (5s) // callBack导出成功回调函数 // options:配置项 类型object 例如可传 {left:1440,right:1440} 控制页边距 // defultImg: 错误或者超时图片 默认图片地址 类型string // className:当前组件的class属性名标识 类型string 配置此项后可以在标签写入class样式 // drawCanvas:当当前页面有比较复杂的样式或组件element-ui等 页面中可以用样式标签将它包裹起来然后将标签 传入drawCanvas数组中 开启转换 handleExportWord({ dom: .export-box, fileName: 托尔斯泰222, drawCanvas: [.btn], }); }; /script导出效果如下:可以看到了element UI的组件也一起导出在最下方项目是采用的vue3vite实际中vue2我试了也是没问题的插件注意事项和使用方法可以去xh-htmlword查看如果有使用疑惑或问题可以加我QQ:1031945252 交流联系共同进步注意如果是使用的vue2版本报了以下错误一定要在vue.config.js中加上配置项会转译node_modules中的包解决报错
