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

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

news 2026/1/12 7:26:24

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

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2026/1/9 7:19:56

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2026/1/10 4:57:46

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2026/1/7 2:20:43

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2026/1/7 12:10:41

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2026/1/2 13:21:11

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2026/1/10 5:22:34

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？ 一键点击，就能将ETABS中所有框架元素的基…...

编程新知 2026/1/11 12:58:41

全面解析数据库：从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...

编程新知 2025/9/19 11:48:17