首页 前端知识 【Vue】vue中将 html 或者 md 导出为 word 文档

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

2024-08-18 22:08:11 前端知识 前端哥 385 354 我要收藏

原博主

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

导出效果

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16129.html
标签
word
评论
发布的文章

无涯教程-HTML5 - MathML

2024-08-25 23:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!