vue使用html2Canvas导出图片 input文字向上偏移

vue使用html2Canvas导出图片 input文字向上偏移

在这里插入图片描述

图中 用的是element的输入框 行高 32px,经常测试 你使用原生的input 还是会出现偏移。

解决方法:修改css样式

1.怎么实现导出 网上随便找很多
2.在第一步 获取你要导出的元素id 克隆后 修改他的样式或者 你直接在你需要打印的页面全局修改样式
3.主要是重置字体的行高,我这里输入框高度是32px 固定的 ,那就使用line-height 和 padding-top 来让他文字居中

const cloneDom = document.getElementById(content).cloneNode(true)document.getElementsByTagName('body')[0].appendChild(cloneDom)cloneDom.querySelectorAll('input').forEach(input => {input.style.height = '32px'input.style.lineHeight = '14px'input.style.paddingTop = '6px'})

效果 差不多 能居中了 完美解决
在这里插入图片描述

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

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

相关文章

基于单片机的水箱水质监测系统设计

本设计基于STM32F103C8T6为核心控制器设计了水质监测系统,选用DS18B20温度传感器对水箱水体温度进行采集;E-201-C PH传感器获取水体PH值;选用TS-300B浊度传感器检测水体浊度;采用YW01液位传感器获取水位,当检测水位低于…

宽带和带宽分不清楚

如何理解带宽 我们平时经常听到的带宽其实是宽带,举个栗子:我家用的是xx运营商提供的,号称1000M宽带,这其实指是的网络数据传输的速率是:1000Mbs(即125MBps)。 那么既然有宽带,就有…

MCU官方IDE软件安装及学习教程集合 — STM32CubeIDE(STM32)

简介 各MCU厂商为保证产品的市场地位以及用户体验,不断的完善自己的产品配套,搭建自己的开发生态,像国外ST公司,国内的GD(兆易创新),AT(雅特力)等等。目前就开发生态而言…

09.定时器02

#include "reg52.h"sbit led P3^6;void delay10ms() { //1. 配置定时器0工作模式位16位计时TMOD 0x01;//2. 给初值,定一个10ms出来TL00x00;TH00xDC;//3. 开始计时TR0 1;TF0 0; } void main() {int cnt 0;led 1;while(1){if(TF0 1)//当爆表的时候&a…

【Qt】QLCDNumber | QProgressBar | QCalendarWidget

文章目录 QLCDNumber —— 显示数字QLCDNumber 的属性QLCDNumber 的使用 QProgressBar —— 进度条QProgressBar 的属性创建一个进度条修改为 红色的进度条 QCalendarWidget —— 日历QCalendarWidget 的属性QCalendarWidget 的使用 QLCDNumber —— 显示数字 QLCDNumber 的属…

UE4_后期处理_后期处理材质及后期处理体积一

后期处理效果 在渲染之前应用于整个渲染场景的效果。 后期处理效果(Post-processing effect)使美术师和设计师能够对影响颜色、色调映射、光照的属性和功能进行组合选择,从而定义场景的整体外观。要访问这些功能,可以将一种称为…

多角度解读WMS:探寻仓库管理系统的核心功能

多角度解读 WMS 仓库管理系统 1. 概述 WMS 在数字化工厂中具有举足轻重的地位,它不仅提高了仓储管理的效率与准确性,还能优化整个供应链的管理,支持灵活生产模式,并提供决策支持的关键数据。通过现代前后端技术的架构设计&#xf…

【Spring Boot 3】自定义拦截器

【Spring Boot 3】自定义拦截器 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术总是要花费或多或…

Prometheus_0基础_学习笔记

一、基本概念 Prometheus是由golang语言开发的一套开源的监控、报警、时间序列数据库的组合,是一款基于时序数据库的开源监控告警系统。 时间序列数据库:时间序列数据库(Time Serires Database , TSDB)不同于传统的关系型数据库。…

idea如何高亮、标记代码颜色的2种方式

zihao 第一种高亮方式 ctrlf 双击选择执行快捷键,所有被搜索的单词都会被搜索且高亮 第二种高亮方式 安装grep console 日志管理插件 ctrlaltf3 双击选择执行快捷键,所有被标记一个颜色高亮

银行卡二三四要素验证-银行卡二三四要素验证接口-银行卡二三四要素验证api

1、接口介绍 银行卡二三四要素验证接口是一种用于验证用户银行卡信息真实性和有效性的技术接口。这种接口在金融、电商等领域有着广泛的应用,旨在确保交易的安全性和合规性。 2、接口地址 全面覆盖,支持所有带银联标识的银行卡; 高准确性-验证结果实时返…

科技型中小企业怎么做

在当今快速发展的科技时代,科技型中小企业扮演着越来越重要的角色。这些企业不仅推动了技术创新,还为经济增长和社会进步做出了巨大贡献。那么,科技型中小企业应如何制定并执行其发展战略呢? 1. 明确定位与战略规划 对于任何企业…

云服务器+docker:还在为项目上线苦恼?一文包你解决(保姆级教程,图文并茂,万字起步!!!)

目录 Blue留言机: 学习视频以及参考资料 : 1、学习之前的必备操作: 第一步:购买服务器 选择一台免费的云服务器(包白嫖的) 配置服务器的一点说明: 查看自己是否购买成功: 第…

docker制作达梦数据库驱动的Python镜像记录

docker制作达梦数据库驱动的Python镜像记录 使用Sqlalchemy ORM 操作达梦 提供构建好的docker镜像 docker pull chongjing001/python:3.12 使用虚拟环境(source /venv/bin/activate) 后pip其他库 镜像中安装Python参考上一篇 下载DM8安装包 版本选择 官网 Linux安装包只有 r…

Python基础笔记

一、python基础1.1 基础知识1.1.1 注释 注释:在程序中对程序代码进行解释说明的文字。 作用:注释不是程序,不能被执行,只是对程序代码进行解释说明,让别人可以看懂程序代码的作用,能够大大增强程序的可读性…

基于yolov8的红绿灯目标检测训练与Streamlit部署(代码+教程)

项目背景 随着智能交通系统的快速发展,自动驾驶技术逐渐成为研究的热点。在自动驾驶领域中,准确识别道路上的交通信号灯是确保车辆安全行驶的关键技术之一。近年来,深度学习技术的发展为交通信号灯的识别提供了强大的支持。YOLO(…

集成电路学习:什么是I/O输入输出

I/O:输入输出 I/O,全称Input/Output,即输入输出,是信息处理系统(如计算机)与外部世界(可能是人类或另一信息处理系统)之间的通信方式。具体来说,输入是系统接收的信号或数…

【Java那些事】关于Git的使用

目录 下拉代码仓库篇 上传代码篇 下拉代码仓库篇 第一步,下拉代码,复制链接。 (从开源网站上复制链接) (建立本地仓库) 这里的URL一般都会自动填充刚刚复制的链接【瞅瞅,确保是想要的那个项…

MATLAB中的线性规划与非线性规划

目录 1. 引言 2. 线性规划(LP) 2.1 线性规划的基本概念 2.2 MATLAB中的线性规划求解 2.3 线性规划的应用 3. 非线性规划(NLP) 3.1 非线性规划的基本概念 3.2 MATLAB中的非线性规划求解 3.3 非线性规划的应用 4. 线性规划…

安防监控视频平台LntonAIServer视频智能分析平台新增视频质量诊断功能

随着安防行业的快速发展,视频监控系统已经成为维护公共安全和个人隐私的重要工具。然而,由于各种因素的影响,视频流的质量可能会受到影响,从而导致监控效果不佳。为了解决这一问题,LntonAIServer推出了全新的视频质量诊…