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

news/2024/5/20 20:41:22

原博主

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.mrgr.cn/p/01644660

相关文章

基于PSO优化的PV光伏发电系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于PSO优化的PV光伏发电系统simulink建模与仿真。其中PSO采用matlab编程实现&#xff0c;通过simulink的函数嵌入模块&#xff0c;将matlab调用进simulink中。 2.系统仿真结…

websevere服务器从零搭建到上线(四)|muduo网络库的基本原理和使用

文章目录 muduo源码编译安装muduo框架讲解muduo库编写服务器代码示例代码解析用户连接的创建和断开回调函数用户读写事件回调 使用vscode编译程序配置c_cpp_properties.json配置tasks.json配置launch.json编译 总结 muduo源码编译安装 muduo依赖Boost库&#xff0c;所以我们应…

麒麟系统

问题描述 Nginx最新版 Nginx 1.25.0解决方案 开放防火墙端口 开启端口:sudo firewall-cmd --zone=public --add-port=8080/tcp --permanent 关闭端口:sudo firewall-cmd --zone=public --remove-port=8080/tcp --permanent 端口生效:firewall-cmd --reload

C#中Linq的去重方式Distinct详解

一、首先创建一个控制台应用程序,添加一个Person对象 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace Compare {public class Person{public string Name { get; set; }public int Age { ge…

华为ensp中BFD和OSPF联动(原理及配置命令)

作者主页&#xff1a;点击&#xff01; ENSP专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年5月6日20点26分 BFD通常指的是双向转发检测。BFD是一个旨在快速检测通信链路故障的网络协议&#xff0c;提供了低开销、短延迟的链路故障检测机制。它主要用于监测两个…

B/S模式的web通信

这里写目录标题 目标实现的目标 服务器代码&#xff08;采用epoll实现服务器&#xff09;整体框架main函数init_listen_fd函数&#xff08;负责对lfd初始化的那一系列操作&#xff09;epoll_run函数 一级目录二级目录二级目录二级目录 目标 实现的目标 我们要实现&#xff0c;…

数字集成电路 NMOS工作区

MOSFET是一个四端器件(栅极、源极、漏极、衬底)。 衬底一般连接到一个直流电源端:NMOS的衬底接地GND,PMOS的衬底接高电平VDD。(为了使得MOS管中的PN结零偏或反偏,尽管如此,二极管的结电容也会对电路产生影响)(PN结正偏不仅会形成通路,也会导致结电容急剧增大 C=ES/D) N…

Python-----容器的介绍以及操作

1.列表和元组 1.列表是什么, 元组是什么&#xff1a; 编程中, 经常需要使用变量, 来保存/表示数据. 如果代码中需要表示的数据个数比较少, 我们直接创建多个变量即可. 但是有的时候, 代码中需要表示的数据特别多, 甚至也不知道要表示多少个数据. 这个时候, 就需要用到列表 列表…

力扣138. 随机链表的复制

Problem: 138. 随机链表的复制 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 1.创建Map集合Map<Node, Node> map;创建指针cur指向head&#xff1b; 2.遍历链表将cur作为键&#xff0c;new Node(cur.val)作为值&#xff0c;存入map集合&#xff1b; 3.再次…

FPGA+炬力ARM实现VR视频播放器方案

FPGA炬力ARM方案&#xff0c;单个视频源信号&#xff0c;同时驱动两个LCD屏显示&#xff0c;实现3D 沉浸式播放 客户应用&#xff1a;VR视频播放器 主要功能&#xff1a; 1.支持多种格式视频文件播放 2.支持2D/3D 效果实时切换播放 3.支持TF卡/U盘文件播放 4.支持定制化配置…

一招MAX降低10倍,现在它是我的了

一.背景 性能优化是一场永无止境的旅程。 到家门店系统,作为到家核心基础服务之一,门店C端接口有着调用量高,性能要求高的特点。 C端服务经过演进,核心接口先查询本地缓存,如果本地缓存没有命中,再查询Redis。本地缓存命中率99%,服务性能比较平稳。随着门店数据越来越多…

【京东云新品发布月刊】2024年4月产品动态

京东云4月产品动态:1.【言犀AI虚拟主播】"采销东哥"数字人是怎样练成的?“大家好,好久不见,我是你们的老朋友东哥……”面对众网友喊话开直播,刘强东以新的形式与大家见面。4月16日下午6点18分,由京东云言犀打造的“采销东哥”AI数字人开启直播首秀,同时亮相京…

【C++】CentOS环境搭建-编译安装Boost库(附CMAKE编译文件)

【C】环境搭建-编译安装Boost库 Boost库简介Boost库安装通过YUM安装&#xff08;版本较低 V1.53.0&#xff09;通过编译安装&#xff08;官网最新版本1.85.0&#xff09;1.安装相关依赖2.查询官网下载最新安装包并解压3.编译Boost4.安装Boost库到系统路径 Boost库验证 Boost库简…

谷歌Gmail邮箱开启SMTP/IMAP服务流程

本篇专门定向讲解谷歌Gmail邮箱,如何开通SMTP协议的流程,在讲篇幅前,我需要你确定3件事:1.你已经有谷歌账号了2.你很清楚自己为什么想要开通SMTP服务3.你已经掌握一定的基础知识,能够达到翻出了谷歌Gmail邮箱开启SMTP/IMAP服务流程如果你没法“翻出去”,接下来的内容就可…

python教程9-第三方模块安装

https://pypi.python.org/pypi 是python的开源模块库。 收录了⾃全世界python开发者贡献的模块,⼏乎涵盖了你想⽤python做的任何事情。 事实上每个python开发 者,只要注册⼀个账号就可以往这个平台上传你⾃⼰的模块,这样全世界的开发者都可以容易的下载并使⽤你的模块。 下载…

从零在win10上测试whisper、faster-whisper、whisperx在CPU和GPU的各自表现情况

Anaconda是什么? Anaconda 是一个开源的 Python 发行版本,主要面向数据科学、机器学习和数据分析等领域。它不仅包含了 Python 解释器本身,更重要的是集成了大量的用于科学计算、数据分析和机器学习相关的第三方库,并且提供了一个强大的包管理和环境管理工具——Conda。 通…

Allegro PCB designer放置振列过空,Via Array,

首先 Place >>Via Array, 然后配置options 选项卡。 最后鼠标左击一下&#xff0c;拉个区域框&#xff0c;再点击一下。如下图 尤其注意鼠标左击一下再左击一下。

小程序直接生成鸿蒙App的方法

今天来聊聊纯血鸿蒙,这个一直处于风口浪尖的技术话题。操作系统作为软件生态系统的基石,始终是全球科技领域竞争的制高点。今天来聊聊纯血鸿蒙,这个一直处于风口浪尖的技术话题。 操作系统作为软件生态系统的基石,始终是全球科技领域竞争的制高点。 鸿蒙操作系统(HarmonyO…

sqlserver01

我们从下载开始 我们这里下载的是2019,但是醉胡我是通过百度网盘下载的,我们来看一下下载后的文件

前端技术选型时有用的网站

npm-compare.com比如我们想比较 react-query和 swr,可以访问 https://npm-compare.com/react-query,swr 查看结果,页面提供了下载量,star 数量,lisense 等的对比,方便我们做出决策。bundlephobia.com比较完了这些,我们可能还想知道哪个包的体积更小,更轻量,这时可以使用…