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

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

news 2026/2/10 22:20:57

因为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

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2026/2/5 4:17:31

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2026/2/9 15:41:39

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/12/31 8:38:23

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2026/1/29 7:31:17

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/12/15 0:46:42

【安全篇】金刚不坏之身：整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

编程新知 2025/12/7 16:12:52

PH热榜 | 2025-06-08

1. Thiings 标语&#xff1a;一套超过1900个免费AI生成的3D图标集合 介绍&#xff1a;Thiings是一个不断扩展的免费AI生成3D图标库&#xff0c;目前已有超过1900个图标。你可以按照主题浏览&#xff0c;生成自己的图标&#xff0c;或者下载整个图标集。所有图标都可以在个人或…...

编程新知 2026/2/10 1:48:49

Ubuntu 可执行程序自启动方法

使用 autostart&#xff08;适用于桌面环境&#xff09; 适用于 GNOME/KDE 桌面环境&#xff08;如 Ubuntu 图形界面&#xff09; 1. 创建 .desktop 文件 sudo vi ~/.config/autostart/my_laser.desktop[Desktop Entry] TypeApplication NameMy Laser Program Execbash -c &…...

编程新知 2025/12/29 22:46:16

【设计模式】1.简单工厂、工厂、抽象工厂模式

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 以下是 简单工厂模式、工厂方法模式 和 抽象工厂模式 的 Python 实现与对比&#xff0c;结合代码示例和实际应用场景说明&#xff1a; 1. 简单工厂模式&a…...

编程新知 2025/10/6 17:38:50