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

导出效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/8909.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

远动通讯屏的作用

远动通讯屏的作用 远动通讯屏有时有称为调度数据网柜&#xff0c;远动通讯屏具体干啥作用&#xff1f;远动通讯屏是以计算机为基础的生产过程与调度自动化系统&#xff0c;可以对现场的运行设备进行监视和控制、以实现数据采集、设备测量、参数调节以及各类信号报警等各项功能。…

Spring MVC、Boot、Cloud:一站式对比与解析

Spring MVC、Boot、Cloud&#xff1a;一站式对比与解析 文章目录 Spring MVC、Boot、Cloud&#xff1a;一站式对比与解析一、SpringMVC二、SpringBoot三、SpringCloud四、从多个方面看1、定位和功能&#xff1a;2、依赖管理&#xff1a;3、开发效率&#xff1a;4、项目结构和维…

git--.gitignore--使用/详解/实例

简介 本文介绍git的.gitignore忽略文件的用法。 项目中并不是所有文件都需要保存到版本库中的&#xff0c;例如“target”目录及目录下的文件就可以忽略。 忽略某个文件&#xff08;不提交到版本库的方法&#xff09;&#xff1a;在Git工作区的根目录下创建一个.gitignore文件…

上海市计算机学会竞赛平台2022年4月月赛丙组闰年的判定

题目描述 给定一个正整数 &#x1d466;y 表示一个年份&#xff0c;请判定 &#x1d466;y 年是否为闰年&#xff0c;闰年分普通闰年与世纪闰年&#xff1a; 普通闰年的年份是 44 的倍数&#xff0c;但不能是 100100 的倍数&#xff1b;世纪闰年的年份是 400400 的倍数。 输…

用webui.sh安装报错No module named ‘importlib.metadata‘

安装sdweb报错&#xff0c;出现No module named importlib.metadata&#xff1a; glibc version is 2.35 Cannot locate TCMalloc. Do you have tcmalloc or google-perftool installed on your system? (improves CPU memory usage) Traceback (most recent call last):File…

Pytorch实现扩散模型【DDPM代码解读篇2】

扩散的代码实现 本文承接 Pytorch实现扩散模型【DDPM代码解读篇1】http://t.csdnimg.cn/aDK0A 主要介绍“扩散是如何实现的”。代码逻辑清晰&#xff0c;可快速上手学习。 # 扩散的代码实现 # 扩散过程是训练部分的模型。它打开了一个采样接口&#xff0c;允许我们使用已经…

【线性回归】

1. 简单线性回归 y ax b double[] x {540, 360, 240}; double[] y {205, 325, 445};问题 根据double[] x 和 double[] y &#xff0c;计算y ax b中a和b的值 解决方法 最小二乘法&#xff1a;让距离&#xff08;实验值和理论值的差值&#xff09;的平方和最小 即&…

堆的基本操作(c语言实现)

1.堆的基本操作 1.1定义堆 typedef int HPDataType;//堆中存储数据的类型typedef struct Heap {HPDataType* a;//用于存储数据的数组int size;//记录堆中已有元素个数int capacity;//记录堆的容量 }HP;1.2初始化堆 然后我们需要一个初始化函数&#xff0c;对刚创建的堆进行初…

【C语言】路漫漫其修远兮,深入[指针]正当下

一. 指针初步 1.概念定义 地址&#xff1a;我们在内存中开辟空间时&#xff0c;为了方便后续访问&#xff0c;每个数据有确切的地址。 指针&#xff1a;指向数据的地址&#xff0c;并将其地址储存在指针变量中。 2.基本运算符 • 取地址操作符&#xff08;&&#xff09; …

stm32F103C8T6裸机如何提高响应速度

思路就是&#xff1a;将主函数的程序分为几块&#xff0c;不使用死延时函数&#xff0c;利用定时器中断&#xff0c;每1MS中断一次&#xff0c;然后中断1000次之后&#xff0c;过去了一秒钟&#xff0c;将1S标志位置1&#xff0c;然后主函数接收到之后&#xff0c;运行1S任务 …

【强化学习入门】基于DDPG的强化学习控制器设计

最近在看控制领域研究热门–强化学习相关的东西&#xff0c;跟着matlab官方强化学习教程一边看一边学&#xff0c;感觉入门门槛略高&#xff0c;需要补很多机器学习相关的知识&#xff0c;高数概率论那些&#xff0c;摸索了个把月感觉现在只大概会用&#xff0c;原理啥的还没搞…

进口家装水管十大品牌哪家好,弗锐德为您推荐进口家装水管领先十大品牌

水管作为家装隐蔽工程之一&#xff0c;选对一款优质的水管是至关重要的&#xff0c;毕竟好的水管能够保证家庭后续几十年的用水安全和健康。今天&#xff0c;小编就和大家说说进口家装水管十大品牌哪家好&#xff1f; 目前国内进口家装水管具有知名度和消费者认可的品牌有&…

自制一个3D打印的移动终端——T3rminal

T3rminal是我过去几个月一直在努力开发的一个CyberDeck&#xff0c;并希望将其开源。 我从不同设备如Decktility、YARH和其他项目中获得了灵感。 你可以在我的Github上协助并关注该项目&#xff1a;https://github.com/crazycaleb2008/T3rminal/tree/main/3D%20Models 材料 …

Edge的使用心得和深度探索-Sider: ChatGPT 侧边栏

作为一款备受欢迎的网络浏览器&#xff0c;Microsoft Edge在用户体验和功能方面都有着诸多优势。在长期的使用中&#xff0c;我总结出了三条使用心得&#xff0c;同时也发现了三个能够极大提高效率的功能。让我们一起深度探索Edge的潜力吧&#xff01; 使用心得&#xff1a; 界…

Spring 常用的注入方式有什么?

Spring 是一个非常流行的 Java 开发框架&#xff0c;它提供了多种依赖注入&#xff08;Dependency Injection&#xff09;的方式&#xff0c;使得开发者可以轻松地管理应用程序中的组件依赖关系。在 Spring 中&#xff0c;常用的注入方式主要包括构造器注入、Setter 方法注入、…

【测试报告】星光日册

⭐ 作者&#xff1a;Jwenen &#x1f331; 作者主页&#xff1a;Jwenen的个人主页 &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; 测试报告 1. 项目介绍2. 测试用例框架3. 自动化测试源码 1. 项目介绍 “星光日册”项目实现了用…

继续SQL

主知识点六&#xff1a;having 聚合前的筛选用where&#xff0c;聚合后的筛选用having Having和where的区别是&#xff1a;运行顺序和对象不用 Having是在group by聚合后的基础上进行筛选。 ● 【例题27*】&#xff08;运行原理&#xff09;查询总人口数至少为3亿的大洲和…

vxe-table 区域选取、复制粘贴功能,的基本使用

vxe-table区域选取、复制粘贴功能&#xff0c;的基本使用&#xff08;注&#xff1a;该功能仅支持企业版&#xff0c;这里仅供部分演示&#xff09; 1.鼠标区域选择功能&#xff1a; 参数说明&#xff1a; mouse-config.area 是否开启鼠标单元格区域选取 <template>&l…

基于深度学习的MVS学习笔记(05.04-05.07)

1. MVS方法与分类 1.1 问题界定&#xff1a;多目和单目双目 单目深度估计&#xff1a;拟合一个函数将图像【RGB输入】映射到深度图【浮点输出】双目深度估计&#xff1a;双目回归视差&#xff0c;可以进一步求像素距离相机光心的深度多视点三维重建 单目只能找到“相对的”相…

详解基于 RAG 的 txt2sql 全过程

前文 本文使用通义千问大模型和 ChromaDB 向量数据库来实现一个完整的 text2sql 的项目&#xff0c;并基于实际的业务进行效果的展示。 准备 在进行项目之前需要准备下面主要的内容&#xff1a; python 环境通义千问 qwen-max 模型的 api-keyChromaDB 向量数据库acge_text_…