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

纯前端实现将页面数据下载word文档中【包括图片，echarts图，表格，和对话 内容】

news 2025/6/3 17:01:02

亲测真实有效

导出word步骤

在Vue中导出Word文档，可以使用第三方库file-saver和html-docx-js。首先需要安装这两个库：

npm install file-saver html-docx-js --save

  "html-docx-js": "0.3.1","file-saver": "2.0.5",

然后在Vue组件中使用这两个库来导出Word文档：

vue

 <chat-operation :info="info" @down="down" ref="chatItem"/>

js

down() {const contenterPdf = this.$refs.chatItemconst canvases = contenterPdf.querySelectorAll('canvas')const cloneDom = contenterPdf.cloneNode(true)if (canvases.length) {const cloneCanvases = cloneDom.querySelectorAll('canvas')const imgs = []canvases.forEach((canvas) => {const img = document.createElement('img')const url = canvas.toDataURL()img.src = urlimg.width = canvas.width >= 750 ? 750 : canvas.widthimg.height = canvas.height >= 560 ? 560 : canvas.heightimgs.push(img)})cloneCanvases.forEach((canvas, index) => {canvas.parentNode.replaceChild(imgs[index], canvas)})}// 过滤代码块序号元素const numberDoms = cloneDom.querySelectorAll('.number-container')numberDoms.forEach(dom => {dom.remove()})const contentHTML = cloneDom.innerHTMLconst content = `<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'></head><body>${contentHTML}</body></html>`const html = htmlDocx.asBlob(content, { orientation: 'portrait', pageSize: 'A4' })FileSaver.saveAs(html, `导出文件.docx`)},

相关文章：

纯前端实现将页面数据下载word文档中【包括图片，echarts图，表格，和对话 内容】

亲测真实有效 导出word步骤 在Vue中导出Word文档&#xff0c;可以使用第三方库file-saver和html-docx-js。首先需要安装这两个库&#xff1a; npm install file-saver html-docx-js --save "html-docx-js": "0.3.1","file-saver": "2.0.5…...

编程日记 2024/5/25 15:36:44

JavaSE——类和对象（二)~~封装

目录 一.封装 二.封装扩展之包 三.static成员 四. 代码块 五. 内部类&#xff08;重要&#xff09; 大家好呀&#xff0c;我是北纬&#xff0c;接着上节我们继续讲解Java中关于类和对象的相关知识&#xff0c;今天着重给大家介绍一下关于面向对象程序的特性之一——封装。…...

编程日记 2024/5/25 15:35:43

头歌OpenGauss数据库-I.复杂查询第9关：交换性别

任务描述 本关任务&#xff1a;给定一张 tb_Salary 表&#xff0c;如下所示&#xff0c;有 m 男性 和 f 女性的值。交换所有的 f 和 m 值&#xff08;例如&#xff0c;将所有 f 值更改为 m&#xff0c;反之亦然&#xff09;。 idnamesexsalary1Elonf70002Donnyf80003Careym60…...

编程日记 2024/5/25 15:34:42

冷干机使用中的注意事项

冷干机使用中的注意事项 使用冷干机时&#xff0c;以下是几个注意事项&#xff1a; 安装位置&#xff1a;选择一个通风良好、温度适宜的位置安装冷干机。确保周围环境没有过多的灰尘、腐蚀性气体或其他污染物&#xff0c;以免对冷干机的正常运行和寿命产生不利影响。 电源要求…...

编程日记 2024/5/25 15:31:39

OpenFeign微服务调用组件使用

前言&#xff1a;OpenFeign是可以跨服务、跨进程的调用方式。 什么是Feign Feign是Netflix开发的声明式、模版化的HTTP客户端。 优势: Feign可以做到使用 HTTP 请求远程服务时就像调用本地方法一样的体验&#xff0c;开发者完全感知不到这是远程方法&#xff0c;更感知不到这…...

编程日记 2024/5/25 15:30:38

文心智能体，零代码构建情感表达大师智能体

前言 随着智能体技术的突飞猛进&#xff0c;各行各业正迎来前所未有的变革与机遇。智能体&#xff0c;作为人工智能领域的重要分支&#xff0c;以其自主性、智能性和适应性&#xff0c;正逐步渗透到我们生活的每一个角落&#xff0c;成为推动社会进步和科技发展的新动力。 为了…...

编程日记 2024/5/25 15:29:37

es6

#　一、变量提升性 let和const没有变量提升性 console.log(str) 》undefined var str 你好console.log(num) 报错 let num 你好console.log(a) 报错 const a 你好function demo (){ let n 2; if(true){ let n 1; } console.log(n) //2 const 也是一样 var 是1 } demo()const…...

编程日记 2024/5/25 15:28:35

「贪心算法」柠檬水找零

力扣原题链接&#xff0c;点击跳转。 假设你的手里没有钱。你要卖柠檬水&#xff0c;每杯5块钱。每个顾客有可能会给你5块钱、10块钱或20块钱&#xff0c;你要拿手中的钱找零。如何判断你能否成功找零呢&#xff1f; 如果一上来就有顾客花10块钱或20块钱&#xff0c;你手中没…...

编程日记 2024/5/25 15:27:34

ssm139选课排课系统的设计与开发+vue

选课排课系统的设计与开发vue 摘 要 互联网的普及&#xff0c;改变了人们正常的生活学习及消费习惯&#xff0c;而且也大大的节省了人们的时间&#xff0c;由于各种管理系统都再不断的增加&#xff0c;更方便了用户&#xff0c;也改良了很多的用户习惯。对于选课排课系统查询…...

编程日记 2024/5/25 15:26:33

Python使用virtualenv创建虚拟环境

目录 第一步&#xff1a;安装virtualenv 第二步&#xff1a;选择一个文件夹用来放所创建的虚拟环境 第三步&#xff1a;创建虚拟环境 第四步&#xff1a;激活虚拟环境 第五步&#xff1a;退出虚拟环境 第六步&#xff1a;测试安装django 前提&#xff1a;你得有个python环…...

编程日记 2024/5/25 15:24:31

LuatOS-Air二次开发学习

LuatOS简介 在介绍LuatOS-Air之前&#xff0c;先介绍下LuatOS。 LuatOS是合宙自研的嵌入式操作系统。覆盖各类物联网应用场景&#xff0c;可运行于4G Cat.1/MCU/NB-IoT/2G/Wi-Fi/蓝牙等等不同的物联网主控芯片。通过完善的嵌入式操作系统LuatOS&#xff0c;使得物联网主控CPU更…...

编程日记 2024/5/25 15:21:28

【Linux】关于获取进程退出状态中的core dump标志补充

通过 wait/waitpid 可以获取子进程的退出状态, 从而判断其退出结果. 记录退出状态的 int 变量 status 的使用情况如下图所示: 如果是收到信号终止的话, 低 7 位为收到的终止信号, 而低第 8 位为 core dump 标志, core dump 标志有什么用呢? core dump 标志只存 0/1, 表示是否…...

编程日记 2024/5/25 15:19:26

Vitis HLS 学习笔记--抽象并行编程模型-控制驱动与数据驱动

目录 1. 简介 2. Takeaways 3. Data-driven Task-level Parallelism 3.1 simple_data_driven 示例 3.2 分析 hls::task 类 3.3 分析通道(Channel) 3.4 注意死锁 4. Control-driven Task-level Parallelism 4.1 理解控制驱动的 TLP 4.2 simple_control_driven 示例 4…...

编程日记 2024/5/25 15:17:24

Python爬取B站视频：封装一下

&#x1f4da;博客主页&#xff1a;knighthood2001 ✨公众号&#xff1a;认知up吧 &#xff08;目前正在带领大家一起提升认知&#xff0c;感兴趣可以来围观一下&#xff09; &#x1f383;知识星球&#xff1a;【认知up吧|成长|副业】介绍 ❤️如遇文章付费&#xff0c;可先看…...

编程日记 2024/5/25 15:16:23

Android Low Storage机制之DeviceStorageMonitorService

一、Android 版本 Android 13 二、low storage简介(DeviceStorageMonitorService) 设备存储监视器服务是一个模块&#xff0c;主要用来&#xff1a; 1.监视设备存储&#xff08;“/ data”&#xff09;。 2.每60秒扫描一次免费存储空间(谷歌默认值) 3.当设备的存储空间不足…...

编程日记 2024/5/25 15:15:22

1105: 交换二叉树的孩子结点

解法&#xff1a; #include<iostream> using namespace std; struct treeNode {char val;treeNode* left, * right;treeNode(char x) :val(x), left(NULL), right(NULL) {}; }; treeNode* buildtree() {char ch;cin >> ch;if (ch #) return NULL;treeNode* r ne…...

编程日记 2024/5/25 15:14:20

TensorFlow.js

什么是 TensorFlow.js&#xff1f; TensorFlow.js 是一个基于 JavaScript 的机器学习库&#xff0c;它是 Google 开发的 TensorFlow 的 JavaScript 版本。它使得开发者能够在浏览器中直接运行机器学习模型&#xff0c;而不需要依赖于后端服务器或云服务。TensorFlow.js 的主要…...

编程日记 2024/5/25 15:13:19

131. 面试中关于架构设计都需要了解哪些内容？

文章目录 一、社区系统架构组件概览1. 系统拆分2. CDN、Nginx静态缓存、JVM本地缓存3. Redis缓存4. MQ5. 分库分表6. 读写分离7. ElasticSearch 二、商城系统-亿级商品如何存储三、对账系统-分布式事务一致性四、统计系统-海量计数六、系统设计 - 微软1、需求收集2、顶层设计3、…...

编程日记 2024/5/25 15:10:16

Nodejs+Websocket+uniapp完成聊天

前言 最近想做一个聊天&#xff0c;但是网上的很多都是不能实现的&#xff0c;要么就是缺少代码片段很难实现websocket的链接&#xff0c;更别说聊天了。自己研究了一番之后实现了这个功能。值得注意的是&#xff0c;我想在小程序中使用socket.io&#xff0c;不好使&#xff0…...

编程日记 2024/5/25 15:08:15

神经网络学习

神经网络学习 导语数据驱动驱动方法训练/测试数据 损失函数均方误差交叉熵误差mini-batch 数值微分梯度梯度法神经网络梯度 学习算法的实现随机梯度下降2层神经网络实现mini-batch实现 总结参考文献 导语 神经网络中的学习指从训练数据中自动获取最优权重参数的过程&#xff0…...

编程日记 2024/5/25 15:07:14

从0开始学习R语言--Day13--混合效应与生存分析

混合效应模型&#xff08;Mixed Effects Model&#xff09; 对于数据来说&#xff0c;我们通常把所有样本共有的影响因素&#xff08;性别&#xff0c;实验处理&#xff0c;实验方法&#xff09;&#xff0c;这种可以推广到总体的叫做固有效应&#xff0c;而仅适用于特定分组的…...

编程新知 2025/6/3 16:26:52

TDengine 运维——巡检工具（定期检查）

背景 TDengine 在运行一段时间后需要针对运行环境和 TDengine 本身的运行状态进行定期巡检&#xff0c;本文档旨在说明如何使用巡检工具对 TDengine 的运行环境进行自动化检查。 安装工具使用方法 工具支持通过 help 参数查看支持的语法 Usage: taosinspect [OPTIONS]Check…...

编程新知 2025/6/3 13:23:21

51c视觉~3D~合集3

我自己的原文哦~ https://blog.51cto.com/whaosoft/13954440 #SceneTracker 在4D时空中追踪万物&#xff01;国防科大提出首个长时场景流估计方法 本篇分享 TPAMI 2025 论文​​SceneTracker: Long-term Scene Flow Estimation Network​​&#xff0c;国防科大提出首…...

编程新知 2025/6/3 13:03:45

摩尔投票算法原理实现一文剖析

摩尔投票算法原理&实现一文剖析 一、算法原理1.1 基本思想1.2 数学原理 二、算法实现2.1 Python实现2.2 Java实现2.3 C实现 三、复杂度分析四、应用场景4.1 多数元素问题4.2 扩展应用&#xff1a;寻找出现次数超过n/3的元素 五、算法优势与注意事项5.1 优势5.2 注意事项 总…...

编程新知 2025/6/3 12:29:00

一天搞懂深度学习--李宏毅教程笔记

目录 1. Introduction of Deep Learning1.1. Neural Network - A Set of Function1.2. Learning Target - Define the goodness of a function1.3. Learn! - Pick the best functionLocal minimaBackpropagation 2. Tips for Training Deep Neural Network3. Variant of Neural…...

编程新知 2025/6/3 11:18:07

Go语言常见接口设计技巧-《Go语言实战指南》

在 Go 中&#xff0c;接口是连接代码组件的桥梁。合理设计接口可以大幅提升程序的可维护性、可扩展性和测试友好性。本章将分享 Go 开发中常见的接口设计技巧与最佳实践。 一、接口设计原则 1. 面向接口编程&#xff0c;而非面向实现编程 尽量使用接口类型作为函数参数或返回值…...

编程新知 2025/6/3 11:17:06

软件开发项目管理工具选型及禅道开源版安装

软件开发项目管理工具选型及禅道开源版安装 为啥选禅道 你以为我选禅道之前没有对比吗&#xff1f; 作为Java码农&#xff0c;首先想到的就是Jira&#xff0c;然而它太重了。。 我们用企微作为沟通工具&#xff0c;腾讯的TAPD的确好用&#xff0c;但是它不开源啊&#xff0c;…...

编程新知 2025/6/3 10:44:33

NULL与空字符串的区别：数据库专家详解

NULL与空字符串的区别&#xff1a;数据库专家详解 1. NULL的概念解析 1.1 NULL的定义 在数据库系统中&#xff0c;NULL是一个特殊标记&#xff0c;表示"未知"或"不存在"的值。它不是任何数据类型的实例&#xff0c;而是表示缺失值的标记。 go专栏&#…...

编程新知 2025/6/3 10:36:13

【MAC】YOLOv8/11/12 转换为 CoreML 格式并实现实时目标检测

在本文中，我们将详细介绍如何将 YOLOv8/11/12 模型转换为 CoreML 格式，并使用该模型在摄像头实时检测中进行目标检测。主要适用于M1、M2、M3、M4芯片的产品。 以下教程在YOLOv8/11/12均适用，此处就以 YOLOv11 举例 目录 前提条件YOLOv8/11/12 转换为 CoreML实时目标检测结论…...

编程新知 2025/6/3 7:07:58

【课堂笔记】标签传播算法Label Propagation Algorithm（LPA）

文章目录 问题背景基本假设算法步骤数学原理解剖算法收敛性 问题背景 标签传播算法&#xff08;Label Propagation Algorithm, LPA&#xff09;主要解决的是数据标注不足的实际问题。在许多现实世界的机器学习任务中&#xff0c;获取大量标注数据&#xff08;即带有正确标签的样…...

编程新知 2025/6/3 2:52:31