vue 使用Html2Canvas对元素截图 下载

介绍

官网:https://html2canvas.hertzen.com/

一款轻量化的网页截图工具,可以对元素截图下载,只有几十KB,很强大,例如程序发送错误,就可以调用方法继续截图,或者用户在干什么都可以继续记录。

安装

npm install --save html2canvas

导入

import html2canvas from "html2canvas";

定义截图的元素

<div ref="test">
<!--在该div里的内容都会给截图-->
</div>

截图

  html2canvas(this.$refs.test, {
      }).then((canvas) => {
        const link = document.createElement("a"); // 创建一个超链接对象实例
        link.download = "meizfeiyi.jpg"; // 设置要下载的图片的名称
        link.href = canvas.toDataURL(); // 将图片的URL设置到超链接的href中
        link.click(); // 触发超链接的点击事件
      });

在这里插入图片描述
在这里插入图片描述

如果需要上传到服务端自行编写即可

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

戴尔Dell R740服务器开机冒烟亮黄灯故障维修

今天分享的是一台过保修期的DELL PowerEdge R740服务器开机冒烟的维修案例。先上图&#xff1a; 接到用户报修后工程师立即响应&#xff0c;由于用户也是刚开工第一天服务器开机就出现了这种祥龙吐雾的祥兆&#xff0c;导致工厂业务流程无法正常使用&#xff0c;这台机器在东莞…

TSINGSEE智能分析网关V4的AI算法在消防场景中有哪些应用?

随着科技的不断创新和发展&#xff0c;人工智能已经成为现代社会的重要组成部分。除了在交通、医疗、电力等领域得到了广泛应用外&#xff0c;人工智能在消防领域也有着广泛的应用。AI烟火识别算法作为TSINGSEE青犀视频AI智能分析网关V4的重要组成部分&#xff0c;在城市消防领…

Vuex学习记录

目录 一、Vuex概述 1.1Vuex是什么 1.2使用Vuex统一管理的好处 1.3什么样的数据适合存储在Vuex中 二、Vuex的基本使用 2.1创建Vuex项目 视图式&#xff08;版本&#xff1a;vue3vuex4&#xff09; 命令式&#xff08; 版本&#xff1a;vue2vuex3&#xff09; 可自定义选…

安全架构设计理论与实践

一、考点分布 安全架构概述&#xff08;※※&#xff09;安全模型&#xff08;※※※&#xff09;信息安全整体架构设计网络安全体系架构设计区块链技术&#xff08;※※&#xff09; 二、安全架构概述 被动攻击&#xff1a;收集信息为主&#xff0c;破坏保密性 主动攻击&#…

【数据结构】每天五分钟,快速入门数据结构(一)——数组

目录 一.初始化语法 二.特点 三.数组中的元素默认值 四.时间复杂度 五.Java中的ArrayList类 可变长度数组 1 使用 2 注意事项 3 实现原理 4 ArrayList源码 5 ArrayList方法 一.初始化语法 // 数组动态初始化&#xff08;先定义数组&#xff0c;指定数组长度&#xf…

计算机网络概论和数据通信基础

文章目录 计算机网络概论从物理构成上看&#xff0c;计算机网络包括硬件、软件和协议三大部分计算机网络的功能组成计算机网络的分类网络体系结构分层与体系结构接口、协议和服务数据传送单位OSI模型TCP/IP模型 数据通信基础数字信号调制为模拟信号正交振幅调制QAM 模拟数据编码…

vue框架-vue-cli

vue-cli Vue CLI是一个官方的脚手架工具,用于快速搭建基于Vue.js的项目。Vue CLI提供了一整套可配置的脚手架,可以帮助开发人员快速构建现代化的Web应用程序。 Vue CLI通过提供预先配置好的Webpack模板和插件,使得开发人员可以在不需要手动编写Webpack配置的情况下快速创建…

专145+总420+哈尔滨工业大学803信号与系统和数字逻辑电路考研经验哈工大电子信息与通信,真题,大纲,参考书。

自从高考失利没有考入哈工大&#xff0c;一直带着遗憾&#xff0c;今年初试专业课803信号与系统和数字逻辑电路145&#xff0c;总分420顺利圆满哈工大&#xff0c;了却了一块心病&#xff0c;回看这一年的复习起起落落&#xff0c;心中的那块初心&#xff0c;让我坚持到了上岸&…

Linux中信号机制

信号机制 信号的概念 概念&#xff1a;信号是在软件层次上对中断机制的一种模拟&#xff0c;是一种异步通信方式 所有信号的产生及处理全部都是由内核完成的信号的产生&#xff1a; 1 按键产生 2 系统调用函数产生&#xff08;比如raise&#xff0c; kill&#xff09; 3 硬件…

内存计算研究进展-通用的近数据计算架构

通用的近数据计算架构方面代表性工作有&#xff1a; AMD Research的 TOP-PIM&#xff0c;Carnegie Mellon Univeristy 的 TOM&#xff0c; University of Wisconsin-Madison 的 DRAMA 和 NDA&#xff0c;Seoul National University 的 PEI &#xff0c;IBM Research 的 AMC (ac…

算法-矩阵置零

1、题目来源 73. 矩阵置零 - 力扣&#xff08;LeetCode&#xff09; 2、题目描述 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,1,1],[1,0,1…

MySQL错误-this is incompatible with sql_mode=only_full_group_by完美解决方案

项目场景 有时候&#xff0c;遇到数据库重复数据&#xff0c;需要将数据进行分组&#xff0c;并取出其中一条来展示&#xff0c;这时就需要用到group by语句。 但是&#xff0c;如果mysql是高版本&#xff0c;当执行group by时&#xff0c;select的字段不属于group by的字段的…

阿里云幻兽帕鲁Windows 服务器怎么下载存档?

阿里云幻兽帕鲁Windows 服务器怎么下载存档&#xff1f;通过远程连接window服务器桌面的方式。 远程连接到阿里云的 Windows 服务器后&#xff0c;可以将压缩后的存档文件&#xff0c;拖动到 workbench\Download 目录后&#xff0c;就会触发浏览器的文件下载&#xff0c;然后将…

数据结构排序:插入排序、希尔排序、选择排序、冒泡排序、堆排序、快速排序

文章目录 插入排序希尔排序选择排序冒泡排序堆排序快速排序 插入排序 基本思想&#xff1a; 直接插入排序是一种简单的插入排序法&#xff0c;其基本思想是&#xff1a; 把待排序的值按其关键码值的大小逐个插入到一个已经排好序的有序序列中&#xff0c;直到所有的记录插入完…

基于STL的演讲比赛流程管理系统(个人学习笔记黑马学习)

1、演讲比赛程序需求 1.1比赛规则 学校举行一场演讲比赛&#xff0c;共有12个人参加。比赛共两轮&#xff0c;第一轮为淘汰赛&#xff0c;第二轮为决赛。每名选手都有对应的编号&#xff0c;如 10001~10012比赛方式:分组比赛&#xff0c;每组6个人;第一轮分为两个小组&#xff…

Leetcode日记 226. 翻转二叉树 给你一棵二叉树的根节点 root ,翻转这棵二叉树,并返回其根节点。

Leetcode日记 226. 翻转二叉树 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 二叉树简介二叉树分类解题方法制作不易&#xff0c;感谢三连&#xff0c;谢谢啦 二叉树简介 二叉树&#xff08;Binary Tree&#xff09;是一种特殊的树形…

读写分离的利器——MySQL Proxy

0 引言 MySQL Proxy是一个位于客户端和MySQL服务器端之间的程序&#xff0c;通过它可以实现监听和管理客户端与MySQL服务器端之间的通信&#xff0c;最大的作用是实现数据库的读写分离&#xff0c;从而达到负载均衡的目的。 MySQL Proxy的常用用途包括负载平衡、故障分析、查…

神经网络——循环神经网络(RNN)

神经网络——循环神经网络&#xff08;RNN&#xff09; 文章目录 神经网络——循环神经网络&#xff08;RNN&#xff09;一、循环神经网络&#xff08;RNN&#xff09;二、循环神经网络结构1、一对一&#xff08;One to One&#xff09;2、一对多&#xff08;One to Many&#…

Vue中$root的使用方法

查看本专栏目录 关于作者 还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#x…

二次元风格个人主页HTML源码

源码介绍 直接上传服务器压缩包解压就完事了&#xff0c;修改index.html内代码即可&#xff0c;注释写的很全&#xff0c;替换图片在文件夹img&#xff0c;只有前端&#xff0c;没有后台&#xff0c;大佬如果需要&#xff0c;可以自行添加后台。本源码非常适合个人工作室主页。…