【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…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
Linux 文件类型，目录与路径，文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件：-（纯文本文件，二进制文件，数据格式文件） 如文本文件、图片、程序文件等。 目录文件：d（directory） 用来存放其他文件或子目录。 设备…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）
CSI-2 协议详细解析 (一） 1. CSI-2层定义（CSI-2 Layer Definitions） 分层结构 ：CSI-2协议分为6层： 物理层（PHY Layer） ： 定义电气特性、时钟机制和传输介质（导线&#…...
（二）原型模式
原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
Mac软件卸载指南，简单易懂！
刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"࿰…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现（两者等价），用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例： 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析：跨文件编程的终极指南 📅 更新时间：2025年6月5日 🏷️ 标签：C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么？&…...