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

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

news 2026/5/27 2:16:07

亲测真实有效

导出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

STM32单片机学习(27) —— SPI相关概念

文章目录概述SPI通信的核心特性I2C和SPI的简单对比SPI学习的补充说明SPI硬件电路设计SPI的四条通信线SPI通信的片选线低电平选中不支持广播通信SPI通信的时序结构&#xff08;重点&#xff09;SPI通信的比特序通信空闲状态&#xff0c;SPI时钟极性采样时机&#xff0c;SPI时钟相…...

编程新知 2026/5/26 3:44:10

App Inventor蓝牙调试避坑指南：从连接失败到数据乱码，一次讲清所有常见问题

App Inventor蓝牙调试避坑指南&#xff1a;从连接失败到数据乱码的实战解决方案在移动应用开发领域&#xff0c;蓝牙通信一直是实现设备间短距离数据交换的核心技术之一。对于使用App Inventor的开发者而言&#xff0c;蓝牙模块提供了无需复杂编码即可实现无线通信的便捷途径。…...

编程新知 2026/5/26 2:27:35

2026年一键生成论文工具对比实测：5款神器从选题到格式全流程护航

写论文的焦虑&#xff0c;是每个科研人和学生都心照不宣的“隐形压力”。选题无从下手&#xff0c;文献检索耗时费力&#xff0c;逻辑框架反复推翻&#xff0c;格式排版让人抓狂&#xff0c;查重降重更是像在和系统玩“猫鼠游戏”。2026年的AI工具早已不是过去那种“打字机”&a…...

编程新知 2026/5/25 23:31:29

Postgresql基础实践教程（八）

⭐️⭐️⭐️⭐️⭐️ 完整数据详见 练习数据免费 ⭐️⭐️⭐️⭐️⭐️ 六十九、查找会员ID 27的向上推荐链 问题 查找会员ID 27的向上推荐链&#xff1a;即推荐该会员的人&#xff0c;以及推荐那个人的人&#xff0c;依此类推。返回会员ID、名字和姓氏。按会员ID降序排列。…...

编程新知 2026/5/25 22:50:40

如何快速掌握Avidemux：新手完整入门指南与5个核心技巧

如何快速掌握Avidemux&#xff1a;新手完整入门指南与5个核心技巧 【免费下载链接】avidemux2 Avidemux2, simple video editor 项目地址: https://gitcode.com/gh_mirrors/avi/avidemux2 Avidemux是一款功能强大且完全开源的专业视频编辑工具&#xff0c;专为快速剪辑、…...

编程新知 2026/5/25 21:58:13

理想二极管控制器：用MOSFET实现毫伏级压降的电源管理方案

1. 理想二极管控制器&#xff1a;告别传统二极管的压降损耗 在电源设计、电池保护、太阳能板并联这些领域里&#xff0c;二极管是个再常见不过的元件。我们用它来防反接、做整流、实现“或”逻辑供电&#xff0c;几乎不假思索。但如果你设计过一个需要处理大电流、低电压的系统…...

编程新知 2026/5/25 17:17:22

智能烹饪助手：基于传感器融合与AI的厨房自动化实践

1. 项目概述&#xff1a;一个让厨房小白也能自信下厨的智能伙伴每次站在灶台前&#xff0c;你是不是也经历过这样的场景&#xff1a;一边手忙脚乱地翻着菜谱&#xff0c;一边担心锅里的菜是不是快糊了&#xff0c;还要分心去计算各种调料该放多少&#xff1f;对于很多刚接触烹饪…...

编程新知 2026/5/25 16:48:25

当卫星在天上“读懂”人间：ICLR 2025 论文深度解读师玉娇、昃向辉的CS2S

把一张卫星图变成一张街景照片&#xff0c;就像把一个俯视棋盘拼成一面看台——不仅要摆对每一枚棋子&#xff0c;还要看懂整场比赛想象这样一个场景&#xff1a;你在城市规划部门工作&#xff0c;需要快速生成某条街道在不同季节、不同天气条件下的真实渲染效果&#xff0c;以…...

编程新知 2026/5/25 14:52:17

Windows HEIC缩略图解决方案：让iPhone照片在资源管理器中重获新生

Windows HEIC缩略图解决方案&#xff1a;让iPhone照片在资源管理器中重获新生 【免费下载链接】windows-heic-thumbnails Enable Windows Explorer to display thumbnails for HEIC/HEIF files 项目地址: https://gitcode.com/gh_mirrors/wi/windows-heic-thumbnails 想…...

编程新知 2026/5/25 13:51:17

Neat Bookmarks：重构Chrome书签管理的树状结构解决方案

Neat Bookmarks&#xff1a;重构Chrome书签管理的树状结构解决方案 【免费下载链接】neat-bookmarks A neat bookmarks tree popup extension for Chrome [DISCONTINUED] 项目地址: https://gitcode.com/gh_mirrors/ne/neat-bookmarks 在信息过载的数字化工作环境中&…...

编程新知 2026/5/25 13:37:43