前端实现将当前页面内容下载成图片(图片可做到高清画质)

插件背景:

html2canvas可以把你想要转变的元素变为图片,使用file-saver下载图片。

1、安装html2canvas、file-saver

npm install html2canvasnpm install file-saver --save

2、在Vue组件中引入并使用html2canvas、file-saver

import html2canvas from 'html2canvas'
import { saveAs } from 'file-saver'

3、点击按钮调用html2canvas相关方法进行下载

示例代码如下:

注意:

1、过度增加 scale 可能会导致生成的图片质量提高但文件大小增加,并可能对性能产生负面影响。因此,应该根据实际需求和页面内容来选择合适的 scale 值。

2、要生成图片的dom中部分样式属性转化成图片后无法体现,如box-shadow属性,生成后的图片将丢失这个属性样式,因此我们需要使用border属性来实现边框样式让生成的图片内容显示边框样式。

<el-button :loading="loading" @click.stop="saveImg">下载</el-button>saveImg() {this.loading = trueconst content = this.$refs.screenshot // 要下载成图片的domif (!content) {this.loading = falsereturn}html2canvas(content, {scale: 2, // 放大倍数,支持小数,可以控制清晰度letterRendering: true,backgroundColor: '#F2F4F3',height: this.$refs.screenshot.clientHeight - 70 // 要转化为图片下载的dom 高度}).then((canvas) => {canvas.toBlob(blob => {this.loading = falsesaveAs(blob, `Oferta para ${this.infoItem?.candidateName} .png`)}, 'image/png')})}

4、效果

触发下载方法后浏览器会提示下载成功,见下图:

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

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

相关文章

Django 学习 笔记

Django 一、模型models 继承django.db.models.Model 1.模型字段 / 模型字段选项参考&#xff1a; 官网&#xff1a;https://docs.djangoproject.com/zh-hans/3.2/ref/models/fields/#common-model-field-options 2.模型Meta选项(定义模型类的属性)&#xff1a; csdn: https:/…

C#基础|对象初始化器与构造方法对比总结

哈喽&#xff0c;你好啊&#xff0c;我是雷工&#xff01; 01 对象初始化器的作用 为了更加灵活的初始化对象的“属性”&#xff0c;是对构造化方法的补充。 02 构造方法总结 2.1、存在的必要性&#xff1a;一个类中&#xff0c;至少要有一个构造方法&#xff08;有无参数均…

五一节前的信息系统的安全保障工作

文章目录 保障流程制定安全保障计划确定检查人员确定检查内容实施检查风险评估修复漏洞定期复查 保障内容系统安全检查网络安全检查数据安全检查应用安全检查用户安全检查安全政策和流程检查 关闭信息系统说明制定关闭计划备份数据通知相关人员停止系统服务关闭系统设备监控关闭…

合合信息引领AI场景化革新,供应链金融智能化审核全面升级!

官.网地址&#xff1a;合合TextIn - 合合信息旗下OCR云服务产品 随着供给侧结构性改革的深入推进和产业结构的不断升级&#xff0c;金融机构在监管部门的指导下&#xff0c;积极拓展供应链金融业务&#xff0c;取得了显著成效。这一举措有效缓解了上下游中小企业的融资困难&a…

国产麒麟v10系统下打包electron+vue程序,报错unknown output format set

报错如下&#xff1a; 报错第一时间想到可能是代码配置原因报错&#xff0c;查看代码似乎感觉没啥问题 又查看具体报错原因可能是因为icon的原因报错&#xff0c;后面查阅发现ico在各系统平台会不兼容&#xff0c;也就是ico是给win下使用的&#xff0c;此处改下图标格式就ok&am…

Unreal Engine动态添加Button实例

在控件蓝图中添加容器&#xff0c;注意命名不要有中文 C代码中找到容器实例 1 2 3 4 5 6 7 8 UVerticalBox* verticalBox Cast<UVerticalBox>(CurrentWidget->GetWidgetFromName(TEXT("VerticalBox_0"))); if (verticalBox ! nullptr) { UScrollBox* …

AJAX——黑马头条-数据管理平台项目

1.项目介绍 功能&#xff1a; 登录和权限判断查看文章内容列表&#xff08;筛选&#xff0c;分页&#xff09;编辑文章&#xff08;数据回显&#xff09;删除文章发布文章&#xff08;图片上传&#xff0c;富文本编辑器&#xff09; 2.项目准备 技术&#xff1a; 基于Bootst…

stm32mp135d bringup

stm32mp135d bringup 一、安装交叉编译链二、获取bsp代码并编译1. tf-a(trust-firmware)二、optee三、u-boot四、linux 三、快速开始四、st社区关于bringup问题链接 关于 stm32mp135d的移植 一共分为4个部分 tf-a(trusted-firmware) optee u-boot linux文件系统编译后面再说&a…

ShardingSphere 5.x 系列【26】 数据分片原理之 SQL 路由

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 3.1.0 本系列ShardingSphere 版本 5.4.0 源码地址:https://gitee.com/pearl-organization/study-sharding-sphere-demo 文章目录 1. 概述2. 携带分片键2.1 直接路由2.2 标准路由2.3 笛卡尔路由3. 不携带分片…

如何在docker上面使用hbase shell

在新公司上班&#xff0c;hbase是cdh6.3.2安装在docker上面&#xff0c;如何直接在shell上面使用hbase shell是访问不到的。使用教程如下&#xff1a; 要在Docker上使用CDH 6.3.2中的HBase shell&#xff0c;你需要按照以下步骤操作&#xff1a; 步骤1&#xff1a;启动HBase服…

【内网横向】SSH协议隧道搭建详解

什么是SSH隧道 SSH隧道是通过Secure Shell&#xff08;SSH&#xff09;协议在两个网络节点之间创建的加密通道。它可以用于安全地传输数据&#xff0c;绕过网络限制或保护数据免受窃听。通过SSH隧道&#xff0c;可以在两个网络之间建立安全的连接&#xff0c;例如在本地计算机和…

字符串简单运算(BigDecimal相关运算)

目录 1.除法 2.乘法 3.减法 4.加法 1.除法 使用 divide(BigDecimal, int, RoundingMode) 方法进行除法运算。第一个参数是要除的 BigDecimal&#xff0c;第二个参数指定结果的小数位数&#xff0c;第三个参数是舍入模式。这里选择了 RoundingMode.HALF_UP&#xff0c;即四舍…

济宁市中考报名照片要求及手机拍照采集证件照方法

随着中考报名季的到来&#xff0c;并且进入了中考报名演练阶段&#xff0c;济宁市的广大考生和家长都开始忙碌起来。报名过程中&#xff0c;上传一张符合要求的证件照是必不可少的环节。本文将详细介绍济宁市中考报名照片的具体要求&#xff0c;并提供一些实用的手机拍照采集证…

BUUCTF--web(2)

1、[HCTF 2018]admin1 打开题目后发现有注册和登录两个页面&#xff0c;因为题目提示admin&#xff0c;尝试用admin进行爆破 爆破得到密码为123 登录得到flag 2、[护网杯 2018]easy_tornado1 打开题目后有三个文件&#xff0c;分别打开查看 在url地址栏中发现包含两个参数&a…

想要提升爬虫效率,该如何调整动态IP切换时间?

在进行网络爬虫操作时&#xff0c;动态代理IP的使用是常见的策略之一&#xff0c;用于隐藏爬虫的真实身份和规避目标网站的封锁。然而&#xff0c;一个常见的问题是&#xff1a;在做爬虫时&#xff0c;动态代理IP切换频率到底是越快越好呢&#xff1f;本文将从不同角度探讨这个…

Java设计模式 _创建型模式_单例模式(懒汉式,饿汉式)

一、单例模式 1、单例模式&#xff08;Singleton Pattern&#xff09;是一种创建对象的设计模式。一个类负责创建自己的对象&#xff0c;同时确保只有1个对象被创建&#xff0c;这个类提供了一种访问其唯一的对象的方式&#xff0c;不需要在实例化该类的对象。从而保证了这个类…

鸿蒙OpenHarmony【轻量系统 编写“Hello World”程序】 (基于Hi3861开发板)

编写“Hello World”程序 下方将通过修改源码的方式展示如何编写简单程序&#xff0c;输出“Hello world”。请在下载的源码目录中进行下述操作。 确定目录结构。 开发者编写业务时&#xff0c;务必先在./applications/sample/wifi-iot/app路径下新建一个目录&#xff08;或一…

计算机视觉——OpenCV 使用分水岭算法进行图像分割

分水岭算法 分水岭算法&#xff1a;模拟地理形态的图像分割 分水岭算法通过模拟自然地形来实现图像中物体的分类。在这一过程中&#xff0c;每个像素的灰度值被视作其高度&#xff0c;灰度值较高的像素形成山脊&#xff0c;即分水岭&#xff0c;而二值化阈值则相当于水平面&am…

spring自定义属性编辑器

spring自定义属性编辑器 属性编辑器用来解析bean的配置文件中的属性标签&#xff0c;spring的BeanWrapperImpl默认会注册CustomCollectionEditor(集合)、CustomMapEditor(Map)、CurrencyEditor(货币)、ByteArrayPropertyEditor等&#xff0c;可以使用CustomEditorConfigurer来注…

上门服务系统|上门服务小程序搭建流程

随着科技的不断进步和人们生活水平的提高&#xff0c;越来越多的服务开始向线上转型。传统的上门服务业也不例外&#xff0c;随着上门服务小程序的兴起&#xff0c;人们的生活变得更加便捷和高效。本文将为大家介绍上门服务小程序的搭建流程以及应用范围。 一、上门服务小程序搭…