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

利用html2Canvas将表格下载为html

news 2026/2/5 2:23:44

给到我的需求是点击按钮时请求后端接口，根据后端返回的数据，生成表格,并将表格的内容直接下载为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

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2026/1/26 20:20:15

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2026/1/24 14:59:08

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/11/29 21:00:30

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2026/1/25 10:09:59

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...

编程新知 2025/12/4 15:47:17

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2026/1/20 7:21:36

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2026/2/3 19:45:13

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2026/1/24 20:09:04

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2026/1/27 18:13:23

Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

编程新知 2026/1/25 20:54:41