html-docx-js和file-saver实现html导出word
依赖html-docx-js,file-saver,html2canvas
import { asBlob } from 'html-docx-js/dist/html-docx';
import { saveAs } from 'file-saver';
import html2Canvas from 'html2canvas';const handleImageToBase64 = (cloneEle) => {let imgElements = cloneEle.getElementsByTagName('img');let canvas = document.createElement('canvas');let ctx = canvas.getContext('2d');const promises = Array.from(imgElements).map((item) => {return new Promise((resolve) => {item.onload = () => {ctx.clearRect(0, 0, item.width, item.height);canvas.width = item.width;canvas.height = item.height;ctx.drawImage(item, 0, 0, item.width, item.height);let ext = '';if (item.src.indexOf('data:image/svg+xml;base64') === 0) {ext = 'png';} else {ext = item.src.substring(item.src.lastIndexOf('.') + 1).toLowerCase();}let dataURL = canvas.toDataURL('image/' + ext);item.setAttribute('src', dataURL);resolve();};});});canvas.remove();return promises;
};const handleCanvasToImage = (cloneEle) => {const canvasElements = cloneEle.getElementsByTagName('canvas');const promises = Array.from(canvasElements).map((ca, index) => {return new Promise((resolve) => {const url = ca.toDataURL('image/png', 1);const img = new Image();img.onload = () => {URL.revokeObjectURL(url);resolve();};img.src = url;// 生成img插入clone的dom的canvas之前canvasElements[index].parentNode.insertBefore(img, canvasElements[index]);});});// 移除原来的canvasArray.from(canvasElements).forEach((ca) => ca.parentNode.removeChild(ca));return promises;
};const handleSvgToImage = (cloneEle) => {const svgElements = cloneEle.getElementsByTagName('svg');Array.from(svgElements).forEach((svg) => {// 将SVG元素转换为PNG图片const img = new Image();img.src = 'data:image/svg+xml;base64,' + window.btoa(encodeURIComponent(svg.outerHTML).replace(/%([0-9A-F]{2})/g, function(match, p1) {return String.fromCharCode('0x' + p1);}));// 将图片插入到SVG元素的位置svg.parentNode.insertBefore(img, svg);// 移除原来的SVG元素svg.parentNode.removeChild(svg);});
};const handleCodeToImage = (ele, cloneEle) => {let codeElements = ele.querySelectorAll('pre code');let cloneCodeElements = cloneEle.querySelectorAll('pre code');const promises = Array.from(codeElements).map((item, index) => {return new Promise((resolve) => {const pre = item.parentNode;html2Canvas(pre, {imageTimeout: 2000,logging: false,scrollY: 0,scrollX: 0,scale: window.devicePixelRatio * 1.2, // 添加的scale 参数width: item.offsetWidth + 32,allowTaint: false,useCORS: true, // 开启跨域}).then(canvas => {// 将 Canvas 转换为图片let dataURL = canvas.toDataURL('image/png');// 创建一个新的 <img> 元素并设置其 src 属性const img = new Image();img.src = dataURL;// 将图片插入到SVG元素的位置const clonePre = cloneCodeElements[index].parentNode;clonePre.parentNode.insertBefore(img, clonePre);// 移除原来的SVG元素clonePre.parentNode.removeChild(clonePre);resolve();});});});return promises;
};// 表格虚线 向右偏移10px左右
const handleTableStyle = (cloneEle) => {let tableElements = cloneEle.getElementsByTagName('table');Array.from(tableElements).forEach((table) => {table.style.borderCollapse = table.style.borderCollapse || 'collapse';table.border = table.border || '1';table.style.marginLeft = '10px';});let thElements = cloneEle.getElementsByTagName('th');Array.from(thElements).forEach((th) => {th.style.backgroundColor = '#f0f0f0';});
};const getMarkdownCss = () => {return `body {color: #383c4a;font-family: -apple-system, blinkmacsystemfont, "Segoe UI", helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 12px;word-wrap: break-word;}`;
};const handleHtml = async (ele, cloneEle, type) => {const canvasPromises = handleCanvasToImage(cloneEle);await Promise.all(canvasPromises);handleSvgToImage(cloneEle);const imagePromises = handleImageToBase64(cloneEle);const codePromises = handleCodeToImage(ele, cloneEle);await Promise.all(codePromises);await Promise.all(imagePromises);handleTableStyle(cloneEle);let cssString = '';if (type === 'markdown') {cssString = getMarkdownCss();}const innerHtml = cloneEle.outerHTML// strong在word中不生效问题.replace(/<strong class="(.*?)">(.*?)<\/strong>/g, '<b class="$1">$2</b>').replace(/<mark/g, '<span').replace(/<\/mark>/g, '</span>');const htmlString = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40"><head><style type="text/css">${cssString}</style> </head><body>${innerHtml}</body></html>`;return htmlString;
};export default function exportWord({ selector, name = 'export', type = 'markdown' }) {if (!selector) return Promise.reject();// eslint-disable-next-line no-async-promise-executorreturn new Promise(async (resolve) => {const ele = document.querySelector(selector);const cloneEle = ele.cloneNode(true);const htmlString = await handleHtml(ele, cloneEle, type);const converted = asBlob(htmlString);saveAs(converted, `${name}.docx`);resolve();});}}
页面调用
exportWord({selector: '.report-container'});
相关文章:
html-docx-js和file-saver实现html导出word
依赖html-docx-js,file-saver,html2canvas import { asBlob } from html-docx-js/dist/html-docx; import { saveAs } from file-saver; import html2Canvas from html2canvas;const handleImageToBase64 (cloneEle) > {let imgElements cloneEle.…...
三维影像系统PACS源码,图像存储与传输系统,应用于医院中管理医疗设备如CT,MR等产生的医学图像的信息系统
PACS,即图像存储与传输系统,是应用于医院中管理医疗设备如CT,MR等产生的医学图像的信息系统。目标是支持在医院内部所有关于图像的活动,集成了医疗设备,图像存储和分发,数字图像在重要诊断和会诊时的显示&a…...
Golang | Leetcode Golang题解之第292题Nim游戏
题目: 题解: func canWinNim(n int) bool {return n%4 ! 0 }...
Redis在SpringBoot中配置
lettuce redis的使用方法有两种,jedis和lecttuce,jedis用的不是很多,下面讲解用lettuce的使用方法。 首先导包: <!--redis依赖--> <dependency><groupId>org.springframework.boot</groupId><artif…...
linux 网络子系统
__netif_receive_skb_core 是 Linux 内核网络子系统中一个非常重要的函数,它负责将网络设备驱动层接收到的数据包传递到上层协议栈进行处理。以下是对该函数的一些关键点的详细解析: 一、函数作用 __netif_receive_skb_core 函数是处理接收到的网络数据…...
JVM:垃圾回收器演进
文章目录 一、演进二、Shenandoah三、ZGC 一、演进 二、Shenandoah Shenandoah是由Red Hat开发的一款低延迟的垃圾收集器,Shenandoah并发执行大部分GC工作,包括并发的整理,堆大小对STW的时间基本没有影响。 三、ZGC ZGC是一种可扩展的低延…...
全新微软语音合成网页版源码,短视频影视解说配音网页版系统-仿真人语音
源码介绍 最新微软语音合成网页版源码,可以用来给影视解说和短视频配音。它是TTS文本转语言,API接口和PHP源码。 这个微软语音合成接口的源码,超级简单,就几个文件搞定。用的是官方的API,试过了,合成速度…...
大语言模型-对比学习-Contrastive Learning
一、对比学习概念 对比学习是一种特殊的无监督学习方法。 旨在通过拉近相关样本的距离并且推远不相关样本的距离,来学习数据表示。 通常使用一种高自由度、自定义的规则来生成正负样本。在模型预训练中有着广泛的应用。 二、对比学习小案例 对比学习主要分为三个…...
C++ 封装的用法
C(七)封装 封装,可以达到,对外提供接口,屏蔽数据,对内开放数据。 权限控制 struct 中所有行为和属性都是 public 的(默认),此举也是为了 C兼容 C 语言, 因为 C 语言中没有权限的概念。 C中的 class 可以…...
【C++11:异常】
目录 抛异常标准书写格式 抛异常如何执行? 指定抛出异常类型: noexcept 关键字:throw 抛异常标准书写格式 抛异常如何执行? 当212行的异常被抛出,程序会重新返回函数func中,在函数中去寻找catch 语句的…...
Dify中HTTP请求节点的常见操作
HTTP节点包括API请求类型(GET、POST、HEAD、PATCH、PUT、DELETE),鉴权类型(无、API-Key基础、API-Key Bearer、API-Key自定义),HEADERS键值设置,PARAMS键值设置,BODY(non…...
《大语言模型(赵鑫)》知识框图
...
【Android】性能实践—编码优化与布局优化学习笔记
编码优化 使用场景 如果需要拼接字符串,优先使用StringBuffer和StringBuilder进行凭借,他们的性能优于直接用加号进行拼接,因为使用加号连接符会创建多余的对象一般情况下使用基本数据类来代替封装数据类型(比如int优于Integer&…...
如何合规与安全地利用专业爬虫工具,构建企业数据竞争优势
摘要: 本文深入探讨了在当今大数据时代,企业如何通过合规且安全的方式运用专业爬虫工具,有效收集并分析海量信息,进而转化为企业独有的数据优势。我们不仅会介绍最佳实践,还会讨论关键技术和策略,帮助企业…...
自动驾驶三维车道线检测系列—OpenLane数据集介绍
文章目录 1. 背景介绍2. OpenLane数据集详细描述2.1 数据集特点2.2 坐标系定义 3. 使用方法4. 结论 1. 背景介绍 自动驾驶技术的发展日新月异,而3D车道感知是其核心之一。本文将深入介绍OpenLane数据集——迄今为止规模最大、最接近真实世界的3D车道数据集。我们将…...
CMakeList学习笔记
设置项目:project project(planning VERSION 1.0.0 LANGUAGES CXX) # 项目的名字 版本 1.1.0 编程语言 CXX 设置包含目录:include_directories、targer_include_directories 设置编译类型:add_executable、add_library add_executable(demo d…...
将git默认的编辑器设置为vin
git默认编辑器现状 如下,很多linux发行版,未加修改的情况下,git的默认编辑器使用起来不太方便 Signed-off-by: root <rootxxx.COM># Please enter the commit message for your changes. Lines starting # with # will be ignored, a…...
ros2_control 6 自由度机械臂
系列文章目录 前言 ros2_control 是一个实时控制框架,专为普通机器人应用而设计。标准的 c 接口用于与硬件交互和查询用户定义的控制器命令。这些接口增强了代码的模块化和与机器人无关的设计。具体的应用细节,例如使用什么控制器、机器人有多少个关节以…...
Python 在自动化中的实际应用:用 Python 简化繁琐任务
文章目录 1、概述2、自动化文件和目录管理3.数据处理与分析4.网页爬虫5. 系统管理6。定时任务7.结语 1、概述 这篇文章将深入探讨Python在自动化中的实际应用,帮助您用Python简化繁琐任务。 我们将从多个方面入手,展示如何利用Python进行文件管理、数据…...
解释 Spring 框架的核心模块(如 IoC 容器、AOP )及其工作原理。描述如何使用 Spring Boot 快速搭建一个 RESTful Web服务?
Spring框架是一个广泛使用的Java企业级应用程序开发框架,它提供了一系列的模块来帮助开发者构建健壮、可测试、可维护的应用程序。 其中,最核心的模块包括IoC容器和AOP(Aspect Oriented Programming,面向切面编程)。 …...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:
根据万维钢精英日课6的内容,使用AI(2025)可以参考以下方法: 四个洞见 模型已经比人聪明:以ChatGPT o3为代表的AI非常强大,能运用高级理论解释道理、引用最新学术论文,生成对顶尖科学家都有用的…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录,但是由于这个树组件的节点越来越多,导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多,导致的浏览器卡顿,这里很明显就需要用到虚拟列表的技术&…...
Linux离线(zip方式)安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1:修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本:CentOS 7 64位 内核版本:3.10.0 相关命令: uname -rcat /etc/os-rele…...
【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制
目录 节点的功能承载层(GATT/Adv)局限性: 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能,如 Configuration …...
《Docker》架构
文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器,docker,镜像,k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...
Python实现简单音频数据压缩与解压算法
Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中,压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言,提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...
FOPLP vs CoWoS
以下是 FOPLP(Fan-out panel-level packaging 扇出型面板级封装)与 CoWoS(Chip on Wafer on Substrate)两种先进封装技术的详细对比分析,涵盖技术原理、性能、成本、应用场景及市场趋势等维度: 一、技术原…...
