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

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

news 2025/9/11 5:08:37

亲测真实有效

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

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/7/20 11:15:04

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2025/9/9 20:38:38

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2025/9/9 10:18:26

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/6/15 21:47:30

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2025/8/4 22:58:29

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2025/9/4 7:55:12

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2025/8/5 9:30:07

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2025/9/7 8:50:34

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

编程新知 2025/8/16 15:34:02

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/9/7 8:55:13