当前位置： 首页 > news >正文

使用html-docx-js + fileSaver实现前端导出word

news 2026/4/11 20:23:15

因为html-docx-js是16年的老库了，它代码里面用到的with语法现在严格模式不允许，用npm直接引入会报错，所以我们需要用其它方式引入

首先要将html-docx-js的代码放到项目中

html-docx-js/dist/html-docx.js at master · evidenceprime/html-docx-js · GitHub

我这边的vue项目，所以放到public文件下

代码里面几个with的用法需要改一下，因为现在都是默认严格模式了

全局搜一下with(，然后把涉及到的都改成类似如下的即可

接下来到项目的html文件中，使用script标签引入

如果使用typescript，需要声明一下全局变量

export declare global {interface Window {htmlDocx: anysaveAs: (doc: any, name: string) => void}
}

这样子就可以在项目中愉快的使用了~使用方法如下：

// 需要打印的dom元素
const areaRef = ref()const handleDownload = () => {const cssText = `th, td {border-color: red;}`const content = `<!DOCTYPE html><html><head><style>${cssText}</style></head><body>${areaRef.value.outerHTML}</body></html>`const converted = window.htmlDocx.asBlob(content, {orientation: 'landscape',})window.saveAs(converted, 'test.docx')
}

PS：如果遇到样式问题的话，比如图片宽高（需要使用img标签的width和height属性），字体大小（需要使用pt）不生效的话，可以先把对应的docx模板转成html查看样式后再对应进行修改

docx转html网站

相关文章：

使用html-docx-js + fileSaver实现前端导出word

因为html-docx-js是16年的老库了&#xff0c;它代码里面用到的with语法现在严格模式不允许&#xff0c;用npm直接引入会报错&#xff0c;所以我们需要用其它方式引入 首先要将html-docx-js的代码放到项目中 html-docx-js/dist/html-docx.js at master evidenceprime/html-do…...

编程日记 2024/8/23 8:22:43

Spark2.x 入门：DStream 输出操作

在Spark应用中&#xff0c;外部系统经常需要使用到Spark DStream处理后的数据&#xff0c;因此&#xff0c;需要采用输出操作把DStream的数据输出到数据库或者文件系统中。 这里以《Spark2.1.0入门&#xff1a;DStream输出操作》中介绍的NetworkWordCountStateful.scala为基础…...

编程日记 2024/8/23 8:18:39

Python爬虫——简单网页抓取（实战案例）小白篇

Python 爬虫是一种强大的工具&#xff0c;用于从网页中提取数据。这里&#xff0c;我将通过一个简单的实战案例来展示如何使用 Python 和一些流行的库&#xff08;如 requests 和 BeautifulSoup&#xff09;来抓取网页数据。 实战案例&#xff1a;抓取一个新闻网站的头条新闻标…...

编程日记 2024/8/23 8:17:38

linux，ubuntu，使用ollama本地部署大模型llama3，模型通用，简易快速安装

文章目录 前言安装ollama启动ollama运行llama3模型查看ollama列表删除模型通过代码进行调用REST API 前言 在拥有了一条4090显卡后&#xff0c;那冗余的性能让你不得不去想着办法整花活&#xff0c;于是就想着部署个llama3&#xff0c;于是发现了ollama这个新大陆&#xff0c;…...

编程日记 2024/8/23 8:15:36

JS中的encodeURIComponent函数示例

JavaScript中的encodeURIComponent函数用于对字符串进行URL编码。它将字符串中的特殊字符转换为相应的编码形式&#xff0c;以确保字符串可以安全地嵌入到URL中。 使用encodeURIComponent函数时&#xff0c;它会将除了字母、数字、-、_、.、~以外的所有字符都进行编码。编码后…...

编程日记 2024/8/23 8:13:34

8.20 pre day bug

pre-bug1 分号省略 这些语句的分隔规则会导致一些意想不到的情形&#xff0c;如以下的一个示例&#xff1b; let m n f(bc).toString()但该语句最终会被解析为&#xff1a; let m n f(ab).toString();returntrue一定会被解析成 return;true;pre-bug2 Math.random()与Mat…...

编程日记 2024/8/23 8:11:32

位运算专题

分享丨【题单】位运算&#xff08;基础/性质/拆位/试填/恒等式/思维&#xff09; - 力扣&#xff08;LeetCode&#xff09; Leetcode 3133. 数组最后一个元素的最小值 我的答案与思路&#xff1a; class Solution { public: // 4 --> (100)2 7 --> (0111)2 // 5 --&g…...

编程日记 2024/8/23 8:10:32

HaProxy学习 —300K的TCP Socket并发连接实现（翻译）

HaProxy学习 —300K的TCP Socket并发连接实现&#xff08;翻译&#xff09; 1 原文链接2 原文翻译2.1 调整Linux系统参数2.2 调整HAProxy 1 原文链接 Use HAProxy to load balance 300k concurrent tcp socket connections: Port Exhaustion, Keep-alive and others&#xff0…...

编程日记 2024/8/23 8:08:30

92.WEB渗透测试-信息收集-Google语法（6）

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;91.WEB渗透测试-信息收集-Google语法&#xff08;5&#xff09; 监控的漏洞也有很多 打…...

编程日记 2024/8/23 8:02:23

[数据集][目标检测]木材缺陷检测数据集VOC+YOLO格式2383张10类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;2383 标注数量(xml文件个数)&#xff1a;2383 标注数量(txt文件个数)&#xff1a;2383 标注…...

编程日记 2024/8/23 8:01:22

【启明智显分享】智能音箱AI大模型一站式解决方案重塑人机交互体验，2个月高效落地

2010年左右&#xff0c;智能系统接入音箱市场&#xff0c;智能音箱行业在中国市场兴起。但大潮激荡&#xff0c;阿里、小米、百度三大巨头凭借自身强大的资本、技术、粉丝群强势入局&#xff0c;形成三足鼎立态势。经过几年快速普及&#xff0c;智能音箱整体渗透率极高&#xf…...

编程日记 2024/8/23 8:00:21

逻辑与集合论基础及其在编程中的应用

目录 第一篇文章&#xff1a;逻辑与集合论基础及其在编程中的深度应用 引言 命题逻辑与谓词逻辑在编程中的深入应用 集合论及其在编程中的深度运用 函数的概念及其与集合的结合 总结与应用 第一篇文章&#xff1a;逻辑与集合论基础及其在编程中的深度应用 引言 逻辑与集…...

编程日记 2024/8/23 7:58:19

【无标题】为什么 pg_rewind 在 PostgreSQL 中很重要？

文章目录 pg_rewind 的工作原理使用 pg_rewind 的要求Basic Usage of pg_rewind重要注意事项:为什么 pg_rewind 需要干净关闭&#xff1f;无法进行干净关闭的情况处理不正常关机结论 pg_rewind 是 PostgreSQL 中的一个实用程序&#xff0c;用于将一个数据库集群与另一个数据库集…...

编程日记 2024/8/23 7:57:18

hostapd生成beacon_ie

配置文件 /data/vendor/wifi/hostapd/hostapd_wlan0.conf 配置参数 AP启动过程&#xff1a;1.上层配置一些参数并根据参数生成配置文件 2.init的时候设置默认参数并加载配置文件上的参数&#xff08;如果重复&#xff0c;以配置文件上的设置优先&#xff09; 相关函数及结构…...

编程日记 2024/8/23 7:56:16

leetcode349:两个数组的交集

两个数组的交集 给定两个数组 nums1 和 nums2 &#xff0c;返回 它们的 交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序 。 public int[] intersection(int[] nums1, int[] nums2) {ArrayList<Integer> list new ArrayList<>();Has…...

编程日记 2024/8/23 7:55:15

Metasploit漏洞利用系列（八）：MSF渗透测试 - PHPCGI漏洞利用实战

在本系列的第八篇文章中&#xff0c;我们将深入探索如何利用Metasploit Framework (MSF) 来针对PHPCGI (PHP Common Gateway Interface) 的漏洞进行渗透测试。PHPCGI作为一种将Web服务器与PHP脚本交互的方式&#xff0c;其不恰当的配置或老旧版本中可能存在的漏洞常被攻击者利用…...

编程日记 2024/8/23 7:54:14

基于python的主观题自动阅卷系统设计与实现

博主介绍&#xff1a; 大家好&#xff0c;本人精通Java、Python、C#、C、C编程语言&#xff0c;同时也熟练掌握微信小程序、Php和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验&#xff0c;能够为学生提供各类…...

编程日记 2024/8/23 7:53:13

计算机毕业设计仪器设备管理系统-折旧-报废-转移-借出-归还

本文主要阐述如何采用利用网络数据库技术&#xff0c;在信息管理系统中合理的进行管理。在全面解析系统的设计理念以及设计手段&#xff0c;将系统进程中的所需的工具以及技术进行综合的设计&#xff0c;重点解析信息管理情况以及自动化管理进程&#xff0c;主要包括&#xff1…...

编程日记 2024/8/23 7:52:12

DAY37

零钱兑换 II public int change(int amount, int[] coins) {int []dpnew int[amount1];dp[0]1;for(int i0;i<coins.length;i){for(int jcoins[i];j<amount;j){dp[j]dp[j-coins[i]];}}return dp[amount];}组合总和 Ⅳ public int combinationSum4(int[] nums, int target)…...

编程日记 2024/8/23 7:48:09

将iso格式的镜像文件转化成云平台能安装的镜像格式（raw/vhd/QCOW2/VMDK ）亲测--图文详解

1.首先，你将你的iso的文件按照正常的流程和需求安装到你的虚拟机中，我这里使用的是vmware,安装完成之后，关机。再次点开你安装好的那台虚拟机的窗口，如下图 选中要导出的镜像，镜像需要关机 2.点击工具栏的文件------选择 导出 整个工程到 ovf 格式—这里你可以选择你要导…...

编程日记 2024/8/23 7:47:07

从DeepWalk到Node2Vec：探索有偏随机游走的图嵌入演进之路

1. 图嵌入技术的前世今生 第一次听说"图嵌入"这个概念时&#xff0c;我正对着社交网络数据发愁。当时手上有几百万用户的关系数据&#xff0c;传统的分析方法完全无法处理这种规模的数据。直到接触了DeepWalk&#xff0c;才真正打开了图数据分析的新世界大门。 图嵌入…...

编程新知 2026/4/11 18:22:31

PDB容器切换避坑指南：Oracle 19c多租户环境下如何优雅跳转CDB/PDB

Oracle 19c多租户环境下的容器切换艺术&#xff1a;从基础操作到高阶避坑 在Oracle 19c的多租户架构中&#xff0c;CDB&#xff08;容器数据库&#xff09;和PDB&#xff08;可插拔数据库&#xff09;的灵活切换是每位DBA和开发者的必备技能。但看似简单的alter session背后&am…...

编程新知 2026/4/11 18:18:29

MATLAB下的增程式电动汽车EREV建模详解：从控制逻辑到仿真策略及整车闭环控制实践

MATLAB增程式电动汽车EREV MATLAB建模过程详细讲解和MATLAB模型 亏电到满电的控制逻辑 以及整车模型的闭环控制 特别是针对各个模式下离合器&#xff0c;发动机&#xff0c;电机和电池充放电的控制&#xff0c;在pdf给出了详细的说明 仿真结果清晰明确&#xff0c;纯手工搭建没…...

编程新知 2026/4/11 17:52:13

一款基于 .NET 开源、跨平台应用程序自动升级组件适

基础示例&#xff1a;单工作表 Excel 转 TXT 以下是将一个 Excel 文件中的第一个工作表转换为 TXT 的完整步骤&#xff1a; 1. 加载并读取Excel文件 from spire.xls import * from spire.xls.common import * workbook Workbook() workbook.LoadFromFile("示例.xlsx"…...

编程新知 2026/4/11 16:52:35

LLM服务SLA跌破99.2%？（GPU资源利用率不足31%真相曝光）——弹性伸缩动态水位算法实战手册

第一章&#xff1a;LLM服务SLA跌破99.2%&#xff1f;——GPU资源利用率不足31%的系统性归因 2026奇点智能技术大会(https://ml-summit.org) 当大模型推理服务的端到端SLA连续三小时低于99.2%&#xff0c;而监控平台却显示A100集群平均GPU利用率长期徘徊在28%–31%之间时&#…...

编程新知 2026/4/11 16:42:30

终极frpc-desktop版本发布checklist：确保质量的10个关键步骤

终极frpc-desktop版本发布checklist&#xff1a;确保质量的10个关键步骤 frpc-desktop是一款FRP跨平台桌面客户端&#xff0c;通过可视化配置帮助用户轻松实现内网穿透。本文将分享确保版本发布质量的10个关键步骤&#xff0c;帮助开发团队打造稳定可靠的桌面应用。 1. 版本号…...

编程新知 2026/4/11 15:41:44

Mapshaper：如何用这个免费工具彻底改变你的地理数据处理工作流？[特殊字符]

Mapshaper&#xff1a;如何用这个免费工具彻底改变你的地理数据处理工作流&#xff1f;&#x1f680; 【免费下载链接】mapshaper Tools for editing Shapefile, GeoJSON, TopoJSON and CSV files 项目地址: https://gitcode.com/gh_mirrors/ma/mapshaper 你是否曾经因为…...

编程新知 2026/4/11 14:48:10

3分钟从文档到专业演示文稿：PPTAgent让你的PPT制作效率提升300倍

3分钟从文档到专业演示文稿&#xff1a;PPTAgent让你的PPT制作效率提升300倍 【免费下载链接】PPTAgent An Agentic Framework for Reflective PowerPoint Generation 项目地址: https://gitcode.com/gh_mirrors/pp/PPTAgent 你是否曾因制作演示文稿而加班到深夜&#x…...

编程新知 2026/4/11 14:01:49

实时口罩检测-通用模型知识蒸馏实践：小模型保持95%精度方案

实时口罩检测-通用模型知识蒸馏实践&#xff1a;小模型保持95%精度方案 1. 引言&#xff1a;当实时检测遇上模型压缩 想象一下&#xff0c;在一个商场入口或者办公楼大堂&#xff0c;需要快速、准确地判断每个人是否佩戴了口罩。这要求系统不仅要看得准&#xff0c;还要反应快…...

编程新知 2026/4/11 13:41:35

黑苹果完全指南：在普通PC上安装macOS的终极教程与避坑手册

黑苹果完全指南&#xff1a;在普通PC上安装macOS的终极教程与避坑手册 【免费下载链接】Hackintosh Hackintosh long-term maintenance model EFI and installation tutorial 项目地址: https://gitcode.com/gh_mirrors/ha/Hackintosh 想要在普通台式机或笔记本上体验ma…...

编程新知 2026/4/11 13:35:23