在 Vue 中将 DOM 导出为图片

你好,我是小白Coding日志,一个热爱技术的程序员。在这里,我分享自己在编程和技术世界中的学习心得和体会。希望我的文章能够给你带来一些灵感和帮助。欢迎来到我的博客,一起在技术的世界里探索前行吧!
在日常的工作中,我们时常会碰到需要将前端页面中精美的设计或重要内容保存为图片的情况。这种需求可能来自于用户希望将页面快照分享给他人,或者是为了备份重要信息以供后续参考。面对这样的需求,传统的做法通常是依赖后端服务器生成图片,并提供下载链接。然而,随着前端技术的发展,我们也可以通过纯前端的方式实现这一功能,而无需依赖后端的帮助。在本文中,我们将深入探讨如何利用 Vue.js 中的强大功能,将前端页面上的元素无缝导出为高质量的图片,为我们的工作带来更大的灵活性和效率提升。

本项目基于Vite+Vue3,这里假设你已经搭建好项目了😀

为了实现将 DOM 对象导出为图片的功能,我们需要依赖一个非常有用的 npm 包,它就是 html2canvas。这个包提供了一个简单而强大的方法,可以将任何 DOM 元素转换为位图图像,使得我们能够在前端环境中轻松地生成并下载网页截图,为用户提供了更多灵活性和便利性。

npm i html2canvas
主要核心代码实现:
  1. 通过按钮点击事件exportImg获取到要导出的DOM对象,
  2. 调用exportToImage函数传入参数
import html2canvas from 'html2canvas';
const exportImg = () =>{const dom = document.getElementById('exportContainer')exportToImage(dom, 'vue3+vite')
}
/*** @description 将dom对象导出为图片* @param {Object} exportContent 要导出的内容* @param {String} title 导出的图片名称*/const exportToImage = (exportContent, title)=> {html2canvas(exportContent).then((canvas) => {const imageDataUrl = canvas.toDataURL('image/png');const downloadLink = document.createElement('a');downloadLink.href = imageDataUrl;downloadLink.download = `${title}.png`;downloadLink.click();});
}

要导出的Dom对象

导出的效果👇

image.png

全部代码

```javascript```javascript```javascript
```vue
<script setup>
import html2canvas from 'html2canvas';
import HelloWorld from './components/HelloWorld.vue'
const exportImg = () =>{const dom = document.getElementById('exportContainer')exportToImage(dom, 'vue3+vite')
}
/*** @description 将dom对象导出为图片* @param {Object} exportContent 要导出的内容* @param {String} title 导出的图片名称*/const exportToImage = (exportContent, title)=> {html2canvas(exportContent).then((canvas) => {const imageDataUrl = canvas.toDataURL('image/png');const downloadLink = document.createElement('a');downloadLink.href = imageDataUrl;downloadLink.download = `${title}.png`;downloadLink.click();});
}
</script><template><div style="padding: 20px" id="exportContainer"><div><a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><HelloWorld msg="将html导出为图片" /></div><div class="card"><button type="button" class="btn" @click="exportImg">导出为图片</button></div>
</template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
.card .btn {background-color: #409eff;border-color: #409eff;color: #fff;
}
</style>


即使代码逻辑很简单,也值得记录下来。我的编程目标是避免重复造轮子!😊
如果觉得有用,就给我点个赞吧😁
探索更多有趣知识,欢迎关注我的微信公众号!每天分享精彩内容,与你一同探寻知识的边界。扫码即可订阅,一起开启知识新旅程!🚀📚
qrcode_for_gh_bd5bafbcdd40_258.jpg
关注我的技术博客,探索前沿科技与实用开发技巧。一起携手走向代码的精彩世界!🚀💻 不错过每一篇精彩!

https://www.xiaobaicoding.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/692303.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【 Maven 】花式玩法之多模块项目

目录 一、认识Maven多模块项目 二、maven如何定义项目的发布策略 2.1 版本管理 2.2 构建配置 2.3 部署和发布 2.4 依赖管理 2.5 发布流程 三、使用Jenkins持续集成Maven项目 四、总结 如果你有一个多模块项目&#xff0c;并且想将这些模块发布到不同的仓库或目标位置&…

Javai递归实现遍历父子级菜单

目录 准备工作 递归实现 未带有显示顺序的递归遍历 准备工作 create table dormitory_management.fuzi (menu_id bigint auto_increment comment 菜单IDprimary key,menu_name varchar(50) not null comment 菜单名称,parent_id bigint default 0 null c…

在UE5中使用OverlayMaterial制作多材质效果

UE5.1中新增了OverlayMaterial&#xff0c;可以让物体套用2个材质球效果&#xff0c;如A材质球为正常材质内容&#xff0c;B材质球为菲涅尔&#xff0c;或是B材质球是法线外拓描边等&#xff0c;该功能类似Unity的多pass效果&#xff0c;方便了日常使用。 下面就讲将怎么用Ove…

开源软件的利弊

目录 开源软件 优势 免费 透明 可更改 可协作 影响力 坏处 安全隐患 良莠不齐 学习成本 持续性问题 未知风险 开源软件 开源软件是一种基于开放协作和共享的软件开发模式&#xff0c;其利弊对于软件产业和社会发展具有重要意义 优势 免费 谁能拒绝不要钱的东西…

如何接口调优?

接口调优是一个涉及多个方面的过程&#xff0c;旨在提高接口的性能、稳定性和可伸缩性。下面是一些常见的接口调优建议&#xff1a; 性能分析&#xff1a; 使用性能分析工具&#xff08;如Profiler、JMeter、LoadRunner等&#xff09;对接口进行压力测试和性能分析&#xff0c;…

多线程相关(1)

线程调度 线程状态&#xff1a;状态切换阻塞与唤醒阻塞唤醒 wait 与 sleep创建线程方式 线程是cpu任务调度的最小执行单位&#xff0c;每个线程拥有自己独立的程序计数器、虚拟机栈、本地方法栈。 线程状态&#xff1a; 线程状态包括&#xff1a;创建、就绪、运行、阻塞、死亡…

2024.2.20

使用多进程完成两个文件的拷贝&#xff0c;父进程拷贝前一半&#xff0c;子进程拷贝后一半&#xff0c;父进程回收子进程的资源 #include<myhead.h> int main(int argc, const char *argv[]) {char str[100]"";puts("please input str:");//从终端读…

深入剖析Nginx:技术解析、最佳实践和高级使用指南(二)

本系列文章简介: 本系列文章通过分析Nginx的内部机制和原理,讲解了Nginx的架构、性能优化和高可用性配置等方面的知识。此外,还介绍了Nginx的最佳实践和高级使用技巧,帮助读者更好地理解和应用Nginx。本系列文章内容详实且深入,适合对Nginx感兴趣的开发人员、系统管理员和…

软件实例分享,饭店餐饮会员卡管理系统怎么弄会员充值怎么记账

软件实例分享&#xff0c;饭店餐饮会员卡管理系统怎么弄会员充值怎么记账 一、前言 以下软件教程以 佳易王餐饮会员管理系统软件V16为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 1、会员可以登记电子会员卡或使用vip卡片 2、卡类型可以自由…

单片机技术的未来发展趋势:人工智能与物联网的融合

单片机技术在未来的发展趋势中&#xff0c;人工智能&#xff08;AI&#xff09;和物联网&#xff08;IoT&#xff09;的融合将会是一个重要的方向。以下是关于单片机技术未来发展趋势中人工智能与物联网融合的几个小点&#xff1a; 1.智能化设备和系统&#xff1a; 随着人工智…

从零学算法322

322.给你一个整数数组 coins &#xff0c;表示不同面额的硬币&#xff1b;以及一个整数 amount &#xff0c;表示总金额。 计算并返回可以凑成总金额所需的 最少的硬币个数 。如果没有任何一种硬币组合能组成总金额&#xff0c;返回 -1 。 你可以认为每种硬币的数量是无限的。 …

【LeetCode】无权图的最短路精选7题——单源、多源

目录 无权图的单源最短路问题&#xff1a; 1. 迷宫中离入口最近的出口&#xff08;中等&#xff09; 2. 最小基因变化&#xff08;中等&#xff09; 3. 单词接龙&#xff08;困难&#xff09; 4. 为高尔夫比赛砍树&#xff08;困难&#xff09; 无权图的多源最短路问题&a…

疾控中心污水采样过程中会遇到哪些困难

在疾控中心的污水采样过程中&#xff0c;可能会遇到多种困难。 首先&#xff0c;污水的成分可能非常复杂&#xff0c;包括各种细菌、病毒、寄生虫、重金属、化学物质等&#xff0c;这给采样带来了很大的挑战。其次&#xff0c;污水中的有害物质可能会对采样设备和人员造成损害…

嘎嘎嘎嘎嘎嘎嘎

☞ 通用计算机启动过程 1️⃣一个基础固件&#xff1a;BIOS 一个基础固件&#xff1a;BIOS→基本IO系统&#xff0c;它提供以下功能&#xff1a; 上电后自检功能 Power-On Self-Test&#xff0c;即POST&#xff1a;上电后&#xff0c;识别硬件配置并对其进行自检&#xff0c…

预处理详解

目录 预定义符号介绍 ​编辑 预处理指令 #define #define 定义标识符 #define 定义宏 #define 替换规则 #define中#和##的使用 带副作用的宏参数 宏和函数的对比 命令行定义 预处理指令 #undef 预处理指令 #include 头文件被包含的方式&#xff1a; 本地文件包含 …

【LeetCode-139】单词拆分(回溯动归)

目录 题目描述 解法1&#xff1a;记忆回溯 代码实现 解法2&#xff1a;动态规划 代码实现 题目链接 题目描述 给定一个非空字符串 s 和一个包含非空单词的列表 wordDict&#xff0c;判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词。 说明&#xff1a; 拆分…

Mybatis的一些工具类

** 1.实现了Interceptor接口&#xff0c;并实现了两个拦截方法&#xff1a;update和query。当Mybatis执行update或query语句时&#xff0c;会自动调用intercept法。intercept方法首先获取当前执行的SQL语句&#xff0c;并计算执行该SQL语句所需的时间。然后&#xff0c;它将执行…

【Unity】【VR开发】Unity云同步功能使用心得

【背景】 有时出差,旅行等等也带着电脑,晚上想要继续编辑项目,就需要用到云同步功能。目前实践下来,发现有些内容可以同步,有些内容则是不可以同步的,总结如下。 【如何云同步一个本地项目】 UnityHub的项目面板中有两个选项卡:项目和云端项目。 鼠标挪动到想要云同步…

c++类和对象新手保姆级上手教学(中)

前言&#xff1a; 类和对象中篇&#xff0c;这里讲到的前4个默认成员函数&#xff0c;是类和对象中的重难点&#xff0c;许多资料上的讲法都非常抽象&#xff0c;难以理解&#xff0c;所以我作出这篇总结&#xff0c;分享学习经验&#xff0c;以便日后复习。 目录 6个默认成员…

土壤墒情监测站的工作原理

TH-TS600土壤墒情自动监测站是一种用于自动检测土壤墒情的仪器&#xff0c;它可以实时监测土壤的水分含量和温度&#xff0c;并将数据传输到数据中心或监测中心进行分析和处理。 土壤墒情自动监测站通常由传感器、数据采集器、数据传输设备和数据处理软件等部分组成。传感器是…