【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.hqwc.cn/news/681298.html

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

相关文章

SpringSecurity源码分析(RemeberMe)

RememberMeServices RememberMeServices 记住我的服务的接口 可以重写实现自己的记住我 public interface RememberMeServices { //建议 org. springframework. security. authentication. RememberMeAuthenticationToken 在大多数情况下使用它&#xff0c;因为它具有相应的身份…

铅离子/镉离子绿色荧光探针,具有高特异性高灵敏度

基本信息&#xff1a; 中文名称&#xff1a;铅离子/镉离子绿色荧光探针 英文名称&#xff1a;Leadmium TM Green AM dye 外观&#xff1a;固体或粉末状 规格&#xff1a;10mg、25mg、50mg (可支持定制&#xff09; 纯度&#xff1a;95% 储存条件&#xff1a;-20C避光避湿…

【Docker】新手教程的第一个demo:Wordpress

1 任务简单介绍 WordPress是什么&#xff1a; 是一个常用博客软件简单易部署&#xff0c;只需要两个容器&#xff08;业务容器 数据库容器&#xff09; 本文借鉴博客&#xff0c;使用自建 WordPress 容器方法在Docker上部署Wordpress&#xff0c;本地环境为Mac时使用该博客…

mysql数据库---操作数据库跟表的命令总结

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文着重整理mysql管理库跟表的指令。 不涉及增删查改等指令 其实本篇主要是我做好笔记格式 用的时候直接复制粘贴的 所以排版大多是为了快速找功能来排的 方便大家快速找目标语法 数据库的简介 一个数据库系…

系统权限控制插件封装-实现系统权限控制插件化

背景&#xff1a;按照传统的开发方式方式&#xff0c;每次新开发一个系统&#xff0c;就需要花费大量时间精力去搭建权限控制模块&#xff0c;如果我们把权限控制这一整个模块都抽离成一个独立的权限控制插件&#xff0c;支持单命令安装&#xff0c;全面暴露参数与方法&#xf…

JDBC技术-1

JDBC: Java Database Connectivity Java连接数据库技术 通俗点说&#xff0c;在Java代码中&#xff0c;使用JDBC提供的方法&#xff0c;可以发送字符串类型的SQL语句到数据库管理软件&#xff08;Mysql&#xff0c;Oracle等&#xff09;&#xff0c;并且获取语句执行结…

RK3568平台(基础篇)linux错误码

一.概述 linux应用程序开发过程中&#xff0c;经常会遇到一些错误信息的返回&#xff0c;存在的可能性有&#xff0c;参数有误、非法访问、系统资源限制、设备/文件不存在、访问权限限制等等。对于这类错误&#xff0c;可以通过perror函数输出具体描述&#xff0c;或者通过str…

Linux-笔记 uboot修改设备树

1. FDT介绍 扁平设备树&#xff08;Flattened Device Tree&#xff0c;FDT&#xff09;&#xff0c;也叫平坦设备树&#xff0c;是设备树的一种二进制表示形式&#xff0c;提高了在嵌入式系统中的传输和解析效率&#xff1b; 2. 在U-Boot中使用FDT 2.1. 进入U-Boot 开发板上…

基于无监督学习算法的滑坡易发性评价的实施(k聚类、谱聚类、Hier聚类)

基于无监督学习算法的滑坡易发性评价的实施 1. k均值聚类2. 谱聚类3. Hier聚类4. 基于上述聚类方法的易发性实施本研究中的数据集和代码可从以下链接下载: 数据集实施代码1. k均值聚类 K-Means 聚类是一种矢量量化方法,最初来自信号处理,旨在将 N 个观测值划分为 K 个聚类,…

如何把逻辑地址转换为物理地址

​ 使用系统架构设计师真题说明&#xff08;2021年&#xff09;某计算机系统页面大小为 4K&#xff0c;进程 P1 的页面变换表如下图示&#xff0c;看 P1 要访问数据的逻辑地址为十六进制 1B1AH&#xff0c;那么该逻辑地址经过变换后&#xff0c;其对应的物理地址应为十六进制&…

【记录42】centos 7.6安装nginx教程详细教程

环境&#xff1a;腾讯云centos7.6 需求&#xff1a;安装nginx-1.24.0 1. 切入home文件 cd home 2. 创建nginx文件 mkdir nginx 3. 切入nginx文件 cd nginx 4. 下载nginx安装包 wget https://nginx.org/download/nginx-1.24.0.tar.gz 5. 解压安装包 tar -zxvf nginx-1.24.0.…

使用Processing和PixelFlow库创建交互式流体太极动画

使用Processing和PixelFlow库创建交互式流体太极动画 引言准备工作效果展示代码结构代码解析第一部分&#xff1a;导入库和设置基本参数第二部分&#xff1a;流体类定义MyFluidDataConfig 类详解MyFluidData 类详解my_update 方法详解流体类定义完整代码 第三部分&#xff1a;太…