原博主
xh-htmlword文档
感谢这位大佬的封装优化和分享,亲测有用!可以去看大佬👇的说明!
前端HTML转word文档,绝对有效!!!
安装
npm install xh-htmlword
导入
import handleExportWord from "xh-htmlword";
页面 dom 生成后调用
//在需要分页的地方添加 <span><br clear="all" style="page-break-before: always" /> </span> 即可分页// 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: "cs",timeOut: 3000,callBack: (res) => {console.log("导出成功"); //res 文档流},defultImg: "",className: "export-box",drawCanvas: [".tree", "#btn"],
});
导出 md 编辑器的内容
.md-editor-preview-wrapper
是你使用的 md 编辑器的预览容器id
const exportWord = () => {handleExportWord({dom: '.md-editor-preview-wrapper',fileName: '导出文档',callBack: () => {ElMessage.success('导出成功');},});
};
导出效果