【Js】导出 HTML 为 Word 文档
在 Web 开发中，有时我们希望用户能够将网页上的 HTML 内容保存为 Word 文档，以便更方便地分享和打印。
html样式
word文档
工具准备
1、 html-docx-js - npm
html-docx-js是一个 JavaScript 库，用于将 HTML 内容转换为 Word 文档的格式。它提供了简单的 API，使得在浏览器环境中可以轻松地生成并导出 Word 文档
2、 file-saver - npm
file-saver是一个 JavaScript 库，用于在浏览器中保存文件。它简化了通过 Blob 对象保存文件的过程，并提供了一个直观的 API。
代码实现
1、先引入这两个库：可以通过 npm 安装，也可以直接使用 CDN 引入，还可以下载到本地项目引用。
<!-- 使用 npm 安装 -->
<!-- npm install html-docx-js file-saver --><!-- 或者直接使用 CDN 引入 -->
<script src="https://cdn.jsdelivr.net/npm/html-docx-js/dist/html-docx.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js"></script><!-- 或者访问上面CDN链接，保存到本地，放在项目里引用 -->
<script src="./js/html-docx.js"></script>
<script src="./js/FileSaver.min.js"></script>
2、创建一个导出方法，该方法接受 HTML 内容作为参数，并将其导出为 Word 文档。
const exportHtmlToDocx = (htmlContent, fileName = 'exported-document.docx') => {// convertImagesToBase64(htmlContent);// 将HTML元素转换为字符串，并提取图片const regularImages = Array.from(htmlContent.querySelectorAll('img'));const imagePromises = regularImages.map(imgElement => {const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');const imgObj = new Image();imgObj.crossOrigin = 'Anonymous'; // 如果图片需要跨域访问imgObj.src = imgElement.src;return new Promise((resolve, reject) => {imgObj.onload = () => {//canvas 图片缩小到固定大小//如果页面上img设置了style="width:50px;height:50px"，已页面设置的为主，如果没有设置就是默认图片的大小canvas.width = imgElement.width || imgObj.width;// 想要的canvas固定宽度canvas.height = imgElement.height || imgObj.height;// 想要的canvas固定高度//计算缩放比例var ratio = Math.min(canvas.width / imgObj.width, canvas.height / imgObj.height);var scaledWidth = imgObj.width * ratio;var scaledHeight = imgObj.height * ratio;var offsetX = (canvas.width - scaledWidth) / 2;var offsetY = (canvas.height - scaledHeight) / 2;// 绘制缩小后的图片ctx.drawImage(imgObj, 0, 0, imgObj.width, imgObj.height, offsetX, offsetY, scaledWidth, scaledHeight);// 将缩小后的图片导出为PNGresolve(canvas.toDataURL('image/png'));};imgObj.onerror = reject;});});Promise.all(imagePromises).then(dataUris => {dataUris.forEach((dataUri, i) => {regularImages[i].src = dataUri;});// 构建包含 HTML 内容的完整 HTML 文档字符串const fullHtmlContent = `<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body>${htmlContent.outerHTML}</body></html>`;// 使用 html-docx-js 将 HTML 转换为 Word 文档的 Blob 对象const converted = htmlDocx.asBlob(fullHtmlContent);// 使用 file-saver 保存 Blob 对象为 Word 文档文件saveAs(converted, fileName);});
};3、在应用中调用上述导出方法，并传入想导出的 HTML 内容。
注意：html结构需要包含style样式，引入css文件样式不生效的
//html页面上
<a class="fs-14 text-g" ng-click="vm.daochu()">导出</a>
<div class="row" id="resumeAllInfo"><div class="row" style="color:#205081;font-size:16px;border-bottom:1px solid #eee;margin-bottom: 15px;padding-bottom: 5px;">基本信息</div><div class="row" style="vertical-align: middle"><span style="float: left;margin-right:20px"><img style="width:50px;height:50px" ng-src="{{ vm.resume.portraitUrl }}" rw-default-img img-type="portrait" alt="头像"></span><span><span style="font-size:16px;margin-right:20px">{{ vm.resume.name }}</span><span style="margin-right:10px">{{ vm.resume.phone }}</span><span ng-if="vm.resume.wechat" style="margin-right:10px"><span style="margin-right:10px">|</span>{{ vm.resume.wechat }}</span><span ng-if="vm.resume.qq" style="margin-right:10px"><span style="margin-right:10px">|</span>{{ vm.resume.qq }}</span><span ng-if="vm.resume.email" style="margin-right:10px"><span style="margin-right:10px">|</span>{{ vm.resume.email }}</span></span></div>
</div><script>……vm.daochu=daochu;function daochu() {// 获取要导出的HTML字符串const htmlElement = document.getElementById('resumeAllInfo');//调用导出方法exportHtmlToDocx(htmlElement, 'my-exported-document.docx');}
</script>
相关文章：
【Js】导出 HTML 为 Word 文档
在 Web 开发中，有时我们希望用户能够将网页上的 HTML 内容保存为 Word 文档，以便更方便地分享和打印。 html样式 word文档 工具准备 1、 html-docx-js - npm html-docx-js是一个 JavaScript 库，用于将 HTML 内容转换为 Word 文档的格式。它…...
c＋＋入门基础篇（上）
目录 前言： 1.c＋＋的第一个程序 2.命名空间 2.1 namespace的定义 2.2 命名空间使用 3.c＋＋输入&输出 4.缺省参数 5.函数重载 前言： 我们在之前学完了c语言的大部分语法知识，是不是意…...
Java实现数据结构——双链表
目录 一、前言 二、实现 2.1 类的创建 三、对链表操作实现 3.1 打印链表 3.2 插入数据 3.2.1 申请新节点 3.2.2 头插 编辑 3.2.3 尾插 3.2.4 链表长度 3.2.5 任意位置插入 3.3 删除数据 3.3.1 头删 3.3.2 尾删 3.3.3 删除指定位置数据 3.3.4 删除指定数据 3…...
Python应用爬虫下载QQ音乐歌曲！
目录： 1.简介怎样实现下载QQ音乐的过程； 2.代码 1.下载QQ音乐的过程 首先我们先来到QQ音乐的官网： https://y.qq.com/，在搜索栏上输入一首歌曲的名称； 如我在上输入最美的期待，按回车来到这个画面 我们首…...
AWS-WAF-Log S3存放，通过Athena查看
1.创建好waf-cdn 并且设置好规则和log存储方式为s3 2. Amazon Athena 服务 使用 （注意s3桶位置相同得区域） https://docs.aws.amazon.com/zh_cn/athena/latest/ug/waf-logs.html#waf-example-count-matched-ip-addresses 官方文档参考,建一个分区查询表…...
无法解析主机：mirrorlist.centos.org Centos 7
从 2024 年 7 月 1 日起，在 CentOS 7 上，请切换到 Vault 存档存储库： vi /etc/yum.repos.d/CentOS-Base.repo 复制/粘贴以下内容并注意您的操作系统版本。如果需要，请更改。此配置中的版本为 7.9.2009： [base] name…...
自动驾驶论文总结
1.预测 1.1光栅化 代表性论文 Motion Prediction of Traffic Actors for Autonomous Driving using Deep Convolutional Networks (Uber)MultiPath (Waymo) 问题 渲染信息丢失感受野有限高计算复杂度 1.2图神经网络 1.2.1 图卷积 LaneGCN (uber 2020) 1.2.2 边卷积 V…...
【uniapp微信小程序】uniapp微信小程序——页面通信
uniapp微信小程序——页面通信 在开发微信小程序过程中，页面之间的通信是一个常见需求。在使用 uniapp 开发微信小程序时，我们可以采用多种方式实现页面之间的数据传递和状态共享。本文将详细介绍几种常见的实现方式，以供开发者参考。 1. 页…...
【笔记】从零开始做一个精灵龙女-画贴图阶段（上）
此文只是我的笔记，不包全看懂，有问题可评论 PS贴图加工 1.打开ps 拖入uv图，新建图层，设置背景色为灰色，改一下图层名字 2.按z缩小一下uv图层，拖入实体uv图片（目的是更好上色，比如…...
线性代数|机器学习-P22逐步最小化一个函数
文章目录 1. 概述2. 泰勒公式3. 雅可比矩阵4. 经典牛顿法4.1 经典牛顿法理论4.2 牛顿迭代法解求方程根4.3 牛顿迭代法解求方程根 Python 5. 梯度下降和经典牛顿法5.1 线搜索方法5.2 经典牛顿法 6. 凸优化问题6.1 约束问题6.1 凸集组合 Mit麻省理工教授视频如下：逐步…...
SpringCloudAlibaba Nacos配置中心与服务发现
目录 1.配置 1.1配置的特点 只读 伴随应用的整个生命周期 多种加载方式 配置需要治理 1.2配置中心 2.Nacos简介 2.1特性 服务发现与服务健康检查 动态配置管理 动态DNS服务 服务和元数据管理 3.服务发现 1.配置 应用程序在启动和运行的时候往往需要读取一些配置信…...
.NET 一款获取内网共享机器的工具
01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等（包括但不限于）进行检测或维护参考，未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失…...
备考美国数学竞赛AMC8和AMC10：吃透1850道真题和知识点（持续）
距离接下来的AMC8、AMC10美国数学竞赛还有几个月的时间，实践证明，做真题，吃透真题和背后的知识点是备考AMC8、AMC10有效的方法之一。 通过做真题，可以帮助孩子找到真实竞赛的感觉，而且更加贴近比赛的内容，…...
旅游景区度假村展示型网站如何建设渠道品牌
景区、度假村、境外旅游几乎每天的人流量都非常高，还包括本地附近游等，对景区及度假村等固定高流量场所，品牌和客户赋能都是需要完善的，尤其是信息展示方面，旅游客户了解前往及查看信息等。 通过雨科平台建设景区度假…...
Python酷库之旅-第三方库Pandas(021)
目录 一、用法精讲 52、pandas.from_dummies函数 52-1、语法 52-2、参数 52-3、功能 52-4、返回值 52-5、说明 52-6、用法 52-6-1、数据准备 52-6-2、代码示例 52-6-3、结果输出 53、pandas.factorize函数 53-1、语法 53-2、参数 53-3、功能 53-4、返回值 53-…...
jvm 06 补充 OOM 和具体工具使用
1.OOM 是什么 OOM，全称“Out Of Memory”，翻译成中文就是“内存用完了”，来源于java.lang.OutOfMemoryError。看下关于的官方说明： Thrown when the Java Virtual Machine cannot allocate an object because it is out of memor…...
使用机器学习 最近邻算法（Nearest Neighbors）进行点云分析 (scikit-learn Open3D numpy)
使用 NearestNeighbors 进行点云分析 在数据分析和机器学习领域，最近邻算法（Nearest Neighbors）是一种常用的非参数方法。它广泛应用于分类、回归和聚类分析等任务。下面将介绍如何使用 scikit-learn 库中的 NearestNeighbors 类来进行点云数…...
安装jenkins最新版本初始化配置及使用JDK1.8构建项目详细讲解
导读 1.安装1.1.相关网址1.2.准备环境1.3.下载安装 2. 配置jenkins2.1.安装插件2.2.配置全局工具2.3.系统配置 3. 使用3.1.配置job3.2.构建 提示：如果只想看如何使用jdk1.8构建项目，直接看3.1即可。 1.安装 1.1.相关网址 Jenkins官网：https…...
微软子公司Xandr遭隐私诉讼，或面临巨额罚款
近日，欧洲隐私权倡导组织noyb对微软子公司Xandr提起了诉讼，指控其透明度不足，侵犯了欧盟公民的数据访问权。据指控，Xandr的行为涉嫌违反《通用数据保护条例》（GFPR），因其处理信息并创建用于微目…...
【VRP】基于常春藤算法IVY求解带时间窗的车辆路径问题TWVRP，最短距离附Matlab代码
% VRP - 基于IVY算法的TWVRP最短距离求解 % 数据准备 % 假设有一组客户点的坐标和对应的时间窗信息 % 假设数据已经存储在 coordinates、timeWindows 和 demands 变量中 % 参数设置 numCustomers size(coordinates, 1); % 客户点数量 vehicleCapacity 100; % 车辆容量 numV…...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
进程地址空间（比特课总结）
一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量 全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环 境变量会⾃动传递给⼦进程。 本地变量限制：本地变量只在当前进程(ba…...
golang循环变量捕获问题
在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下： 问题背景 看这个代码片段： fo…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...
（二）TensorRT-LLM | 模型导出（v0.20.0rc3）
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
JVM 内存结构 详解
内存结构 运行时数据区： Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器： 线程私有，程序控制流的指示器，分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程，系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制
目录 节点的功能承载层（GATT/Adv）局限性： 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能，如 Configuration …...