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

利用html2Canvas将表格下载为html

news 2025/11/6 10:37:05

给到我的需求是点击按钮时请求后端接口，根据后端返回的数据，生成表格,并将表格的内容直接下载为html,如下图。
在这里插入图片描述
平常做的下载都是后端返回二进制流，这次前端做下载那就必须把页面先画出来，因为下载下来的表格在页面上是不显示的，所以要画出来再隐藏一下，隐藏的时候可选方式有很多，但是v-if,v-show这种会导致页面重构的不建议使用（事实也证明v-if和v-show在这种场景是不能使用的，因为这种场景要求表格是实际存在的元素）所以我选择了绝对定位加上z-index:-999的方式，让表格隐藏在文档流下面。
1：html代码-表格样式

    <divid="canvas-file1"style="width: 800px;line-height: 20px;font-size: 14px;position: absolute;z-index: -999;"><tablewidth="800px"border="1px"cellspacing="0px"cellpadding="10px"align="center"bgcolor="#fff"style="margin-top: 10px"><tr><th>商品名称</th><th>规格</th><th>数量</th><th>金额（元）</th></tr><tbody align="center"><template v-for="item in table1.goodsDetailsInfoVOList"><tr v-if="item.hasChildren"><td :rowspan="item.children.length + 1">{{ item.goodsName }}</td><td>{{ item.goodsSpec }}</td><td>{{ item.goodsNum }}</td><td>{{ item.payAmount }}</td></tr><tr v-for="item in item.children"><td>{{ item.goodsSpec }}</td><td>{{ item.goodsNum }}</td><td>{{ item.payAmount }}</td></tr></template></tbody></table></div>

表格画好以后，考虑两种下载的方法，一种是将表格转成图片，然后将图片转成html页面下载。第二种是将表格作为字符串拼接到html页面中，然后下载。（后续发现第一种方法累赘了，当时也不知道怎么想的）
记录一下第一种方法，html2canvas方法里面接受两个参数，第一个就是dom对象，第二个是转canvas时的一些自定义配置项，生成后该方法会调用then回调，将canvas传递出来，我们就可以拿到了。但是有一个值得一提的问题，就是我发现html转canvas的过程是相当缓慢的，这也是后面我放弃这种方法的原因

const handleSubmitExportGoods = () => {exportGoodsLoading.value = true;setTimeout(() => {let arr = [];for (let i = 0; i < 100; i++) {arr.push({ a: i, b: i + 1, c: i + 2 });}table1.value = {list: arr,time: "2023-7-31 09:15:18",title: "活动名称",titleTime: "2023-7-25 09:00:00 发布",};nextTick(() => {html2canvas(document.getElementById("canvas-file1"), {backgroundColor: "transparent", //背景图片透明allowTaint: true, //跨域useCORS: true, //跨域}).then((canvas) => {exportGoodsLoading.value = false;let oImg = new Image();oImg = canvas.toDataURL("image/png"); // 导出图片const html = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body style="margin:0"><img src="${oImg}"></img></body></html>`;let blob = new Blob([html], { type: "text/html" });let url = window.URL.createObjectURL(blob);let a = document.createElement("a");a.download = "订单";a.style.display = "none";a.href = url;document.body.appendChild(a);a.click();a.remove();**});});}, 500);
};

然后就是第二种方法，把table拼到html里面，直接上代码

const downloadFile = (domName, fileName) => {let htmlStr = document.getElementById(domName).innerHTML;const html = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body style="margin:0">${htmlStr}</body></html>`;let blob = new Blob([html], { type: "text/html" });let url = window.URL.createObjectURL(blob);let a = document.createElement("a");a.download = fileName;a.style.display = "none";a.href = url;document.body.appendChild(a);a.click();a.remove();
};

相关文章：

利用html2Canvas将表格下载为html

给到我的需求是点击按钮时请求后端接口&#xff0c;根据后端返回的数据&#xff0c;生成表格,并将表格的内容直接下载为html,如下图。 平常做的下载都是后端返回二进制流&#xff0c;这次前端做下载那就必须把页面先画出来&#xff0c;因为下载下来的表格在页面上是不显示的&a…...

编程日记 2023/12/26 18:38:53

《Git快速入门》Git分支

1.master、origin、origin/master 区别 首先搞懂git分支的一些名称区别&#xff1a; master &#xff1a; Git 的默认分支名字。它并不是一个特殊分支、跟其它分支完全没有区别。 之所以几乎每一个仓库都有 master 分支&#xff0c;是因为 git init 命令默认创建它&#xff0c…...

编程日记 2023/12/26 18:36:52

HarmonyOS应用性能与功耗云测试

性能测试 性能测试主要验证HarmonyOS应用在华为真机设备上运行的性能问题&#xff0c;包括启动时长、界面显示、CPU占用和内存占用。具体性能测试项的详细说明请参考性能测试标准。 性能测试支持Phone和TV设备&#xff0c;包格式包括Hap/App。 前提条件 已注册华为开发者帐号&a…...

编程日记 2023/12/26 18:32:47

【AI】人工智能本地环境集成安装

目录 1、基础安装 1.1 GPU安装 1.1.1 GPU版本支持 1.1.2 下载CUDA 1.1.3安装CUDA 1.1.4配置环境变量 1.1.5检测CUDA是否安装成功 1.2 CUDNN安装 1.2.1 下载CUDNN 1.2.2 添加配置 1.2.3验证结果 2、pytorch安装...

编程日记 2023/12/26 18:31:46

主流级显卡的新选择，Sparkle（撼与科技）Intel Arc A750兽人体验分享

▼前言 对于玩家而言&#xff0c;英特尔独显的出现不仅打破了NVIDIA与AMD双雄天下的局面&#xff0c;而且旗下的Arc A系列显卡还拥有不俗的做工性能以及颇具优势的价格&#xff0c;无论是升级或者是装新机都非常合适。如果要在Arc A系列当中选一个性能不俗&#xff0c;能够满足…...

编程日记 2023/12/26 18:26:42

BI 商业数据分析能够给企业带来什么改变？

时下&#xff0c;随着中国企业数据整合应用的意识不断提高&#xff0c;BI 商业数据分析的应用驶入飞速发展的“快车道”。BI 商业智能利用数据分析技术与业务场景联系起来&#xff0c;通过一系列思维方法、指标体系及工具模型来支持市场分析、产品优化、客户洞察&#xff0c;从…...

编程日记 2023/12/26 18:25:41

模式识别与机器学习-特征选择和提取

模式识别与机器学习-特征选择和提取 特征选择一些距离测度公式独立特征的选择准则一般特征的散布矩阵准则 离散K-L变换 谨以此博客作为复习期间的记录。 常见分类问题的流程&#xff0c;数据预处理和特征选择提取时机器学习环节中最重要的两个流程。这两个环节直接决定了最终性…...

编程日记 2023/12/26 18:24:40

嵌入式——RTC闹钟Alarm

开发流程 配置RTC时钟设置RTC闹钟配置RTC闹钟中断实现中断函数RTC闹钟初始化 // 闹钟外部中断 exti_flag_clear(EXTI_17); exti_init(EXTI_17,EXTI_INTERRUPT,EXTI_TRIG_RISING);// 重置闹钟 rtc_alarm_disable(RTC_ALARM0);rtc_alarm_struct ras; ras.alarm_mask = RTC_ALARM…...

编程日记 2023/12/26 18:22:38

【linux】线程控制

线程控制 1.创建线程2.线程终止3.线程等待4.线程分离5.对线程的简单封装 喜欢的点赞&#xff0c;收藏&#xff0c;关注一下把&#xff01; 进程概念上篇文章已经讲完了&#xff0c;下面我们就来说说线程控制。 我们使用的接口是pthread线程库&#xff0c;也叫做原生线程库给我…...

编程日记 2023/12/26 18:21:37

Swift学习笔记第三节：Set类型

1、代码 import Foundationvar set1: Set<Int> [1, 2, 3, 4, 3] print("定义1: \(set1)") var set2 Set(1...4) print("定义2: \(set2)") print("长度: \(set2.count)") print("是否为空: \(set2.isEmpty)") set1.insert(99)…...

编程日记 2023/12/26 18:19:35

【前端】安装指定版本的nodejs

先安装curl sudo apt install curl以下是 Nodejs 18.x的安装&#xff0c;一行代码搞定 &&\ 的意思是前面的命令执行无误后&#xff0c;再执行后面代码 curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\ sudo apt-get install -y node…...

编程日记 2023/12/26 18:18:34

多商户小程序开源商城源码 打造微信商城新零售网店

一款易于二次开发的商城小程序&#xff0c;使用php、thinkphp6、vue、element-ui和uniapp技术栈进行开发。 该商城小程序内置多商户商城和分销商城&#xff0c;包括小程序商城、H5商城、公众号商城、PC商城和App&#xff0c; 支持多种分销模式、拼团、砍价、秒杀、优惠券、活…...

编程日记 2023/12/26 18:17:33

云仓酒庄的品牌雷盛红酒LEESON分享干红是纯葡萄酿造的吗？

干红是一种葡萄酒的简称&#xff0c;全称是干型红葡萄酒。葡萄酒按含残糖量分为干型、半干型、半甜型和甜型。无论什么型的酒&#xff0c;只要是葡萄酒&#xff0c;那就是葡萄酿造的。 云仓酒庄的品牌雷盛红酒LEESON分享干红是葡萄酒的一种&#xff0c;而葡萄酒却不止干红一种…...

编程日记 2023/12/26 18:16:32

PHP函数学习总结

version_compare&#xff08;比较php版本&#xff09; 用法&#xff1a; version_compare(string $version1, string $version2, ?string $operator null): int|bool//示例 $result version_compare(PHP_VERSION, 8.0.0) > 0 ? ok : fail;echo $result;// 输出ok证明当…...

编程日记 2023/12/26 18:11:28

5G RedCap：轻量5G技术的新宠

嘿&#xff0c;大家好&#xff01;今天我们将深入了解一项引领5G轻量化时代的关键技术——5G RedCap。这项技术可谓是5G发展中的一把新利器&#xff0c;让我们看看它是如何在5G世界中展露头角的。 5G RedCap是什么&#xff1f;轻量化5G技术的精髓 5G RedCap的全名是5G Reduced…...

编程日记 2023/12/26 18:10:27

【LeetCode 热题 HOT 100】题解笔记 —— Day04

❤ 作者主页&#xff1a;欢迎来到我的技术博客&#x1f60e; ❀ 个人介绍&#xff1a;大家好&#xff0c;本人热衷于Java后端开发&#xff0c;欢迎来交流学习哦&#xff01;(&#xffe3;▽&#xffe3;)~* &#x1f34a; 如果文章对您有帮助&#xff0c;记得关注、点赞、收藏、…...

编程日记 2023/12/26 18:08:26

rust中的超时处理

rust中的超时处理 自从 tokio 1.0发布以来&#xff0c;rust的异步开发总算大势已定。尽管没达到标准库的速度&#xff0c;依然挡不住大家的热情。看编程排行榜&#xff0c;增加2倍的开发者。 既生瑜何生亮&#xff0c;感觉go就是小号的rust。 不废话了。背景&#xff1a;之前…...

编程日记 2023/12/26 18:06:23

DML语言（重点）———update

格式&#xff1a;update 要修改的对象 set 原来的值新值 -- 修改学员名字,带了简介 代码案例&#xff1a; -- 修改学员名字,带了简介 UPDATE student SET name清宸 WHERE id 1; -- 不指定条件情况下&#xff0c;会改动所有表&#xff01; 代码案例…...

编程日记 2023/12/26 18:01:17

Mybatis使用详解

简介 MyBatis是一款优秀的持久层框架&#xff0c;它支持普通SQL查询&#xff0c;存储过程和高级映射。MyBatis通过简单的XML或注解用于配置和原始映射&#xff0c;将接口和Java的POJOs&#xff08;Plain Ordinary Java Object&#xff0c;普通的Java对象&#xff09;映射成数据…...

编程日记 2023/12/26 18:00:16

云原生周刊：Karmada 成为 CNCF 孵化项目 ｜ 2023.12.25

开源项目推荐 kubernetes-reflector Reflector 是一个 Kubernetes 的插件&#xff0c;旨在监视资源&#xff08;secrets 和 configmaps&#xff09;的变化&#xff0c;并将这些变化反映到同一命名空间或其他命名空间中的镜像资源中。 Lingo Lingo 是适用于 K8s 的 OpenAI 兼…...

编程日记 2023/12/26 17:59:15

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/11/5 6:33:45

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

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

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

编程新知 2025/11/5 4:40:56

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2025/10/30 5:58:19

云原生玩法三问：构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

编程新知 2025/11/5 17:01:57

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/10/25 15:52:58

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/20 4:39:36

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/10/27 10:31:03

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2025/10/30 7:47:14

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2025/10/31 3:42:24