【Vue】vue中将 html 或者 md 导出为 word 文档

原博主

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('导出成功');
    },
  });
};复制

导出效果