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

news2024/9/20 7:00:26

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.coloradmin.cn/o/2107817.html

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

相关文章

web渗透:SSRF漏洞

SSRF漏洞的原理 SSRF(Server-Side Request Forgery,服务器端请求伪造)是一种安全漏洞,它允许攻击者构造请求,由服务端发起,从而访问服务端无法直接访问的内部或外部资源。这种漏洞通常发生在应用程序允许用…

v$session_longops监控 PDB clone 进度

How to Monitor PDB Clone / Move On Create Pluggable Database with COPY Clause Statement Execution (Doc ID 2866302.1)​编辑To Bottom In this Document Goal Solution References APPLIES TO: Oracle Database - Enterprise Edition - Version 19.14.1.0.0 and later…

leetcode:908. 最小差值 I(python3解法)

难度&#xff1a;简单 给你一个整数数组 nums&#xff0c;和一个整数 k 。 在一个操作中&#xff0c;您可以选择 0 < i < nums.length 的任何索引 i 。将 nums[i] 改为 nums[i] x &#xff0c;其中 x 是一个范围为 [-k, k] 的整数。对于每个索引 i &#xff0c;最多 只能…

【赛题已出】2024数学建模国赛A-E题已发布

2024年高教社杯全国大学生数学建模各题赛题已发布&#xff01; A题 B题 C题 D题 E题

Linux开源监控工具netdata

Netdata 是一个免费、开源、实时、专业的服务器监控工具&#xff0c;它以可视化的形式实时展现监控主机的性能变化&#xff0c;提供了一个交互式 Web 界面来查看您的服务器指标。它可以帮助我们了解监控主机的系统或应用程序中正在发生的事情以及刚刚发生的事情&#xff0c;并且…

macos系统内置php文件列表 系统自带php卸载方法

在macos系统中, 自带已经安装了php, 根据不同的macos版本php的版本号可能不同, 我们可以通过 which php 命令来查看mac自带的默认php安装路径, 不过注意这个只是php的执行文件路径. 系统自带php文件列表 一下就是macos默认安装的php文件列表. macos 10.15内置PHP文件列表配置…

iOS——GCD再学习

GCD 使用GCD好处&#xff0c;具体如下&#xff1a; GCD 可用于多核的并行运算&#xff1b;GCD 会自动利用更多的 CPU 内核&#xff08;比如双核、四核&#xff09;&#xff1b;GCD 会自动管理线程的生命周期&#xff08;创建线程、调度任务、销毁线程&#xff09;&#xff1b…

面试软件测试需要掌握的技能有哪些?

一、测试用例的编写 1、在测试中最重要的文档&#xff0c;他是测试工作的核心&#xff0c;是一组在测试时输入输出的标准&#xff0c;是软件需求的具体对照。编写测试用例&#xff0c;是测试人员的基本功&#xff0c;真正能写好的人并不多。 测试用例包含的内容&#xff1a; …

windows手工杀毒-寻找可疑进程之进程模块

上篇回顾&#xff1a;windows手工杀毒-寻找可疑进程之进程启动文件-CSDN博客 上篇我们介绍了如何通过进程启动文件寻找可疑进程&#xff0c;首先我们查看文件的数字签名&#xff0c;如果签名是合法的&#xff0c;且是正规公司的证书。基本可疑排除进程是可疑进程&#…

建议收藏!分享7款AI免费写论文学术工具

在当前的学术写作领域&#xff0c;AI工具已经成为许多研究人员和学生的重要助手。这些工具不仅能够帮助用户快速生成高质量的论文初稿&#xff0c;还能在一定程度上简化学术写作流程&#xff0c;提高写作效率。以下是七款免费且功能强大的AI写论文学术工具推荐&#xff1a; 一…

如何使用树莓派构建 LoRa 网关?

顾名思义&#xff0c;远距离广域网或LoRaWAN技术广泛用于物联网&#xff08;IoT&#xff09;中的远距离、低功耗通信。 在本文中&#xff0c;我们将指导您如何将SX130x 868M LoRaWAN网关模块通过硬件附加在顶部&#xff08;HAT&#xff09;的方式连接到Raspberry Pi4。此设置创…

上手一个RGBD深度相机:从原理到实践--ROS noetic+Astra S(上):解读深度测距原理和内外参推导

前言 最近在做项目的时候&#xff0c;项目组丢给了我一个深度相机&#xff0c;今天我们来尝试上手一个实体深度相机。 本教程设计基础相机的原理&#xff0c;使用&#xff0c;标定&#xff0c;和读取。(注&#xff1a;本教程默认大家有ROS1基础&#xff0c;故不对程序进行详细…

Camelyon16数据集切块批量预处理

参考自&#xff1a; Camelyon16数据集切块预处理 区别是这里做了批量处理 数据集目录格式&#xff1a; ** main.py** # !/usr/bin/python3 # -*- coding: utf-8 -*- # Time : 2024/9/4 20:21 # Author : 猫娜Lisa # File : camelyon16_get_patch.py # Software: PyC…

Linux从0到1——基础IO(下)【磁盘/文件系统/软硬链接/动静态库】

Linux从0到1——基础IO&#xff08;下&#xff09; 0. 前言1. 磁盘1.1 物理存储结构1.2 磁盘的逻辑存储结构 2. 文件系统2.1 文件系统的管理思想2.2 详解块组2.3 文件名和inode2.4 挂载 3. 软硬链接3.1 引入3.2 软链接3.3 硬链接 4. 动静态库4.1 静态库4.2 动态库 0. 前言 前面…

强化学习之PPO算法

PPO算法 什么是PPO算法PPO算法的原理PPO-Clip的目标函数 什么是PPO算法 PPO算法&#xff0c;全称为Proximal Policy Optimization&#xff08;近端策略优化&#xff09;&#xff0c;是一种强化学习算法。它由OpenAI在2017年提出&#xff0c;旨在解决策略梯度方法中的一些问题&…

带你0到1之QT编程:六、打地基QList的高效用法

此为QT编程的第六谈&#xff01;关注我&#xff0c;带你快速学习QT编程的学习路线&#xff01; 每一篇的技术点都是很很重要&#xff01;很重要&#xff01;很重要&#xff01;但不冗余&#xff01; 我们通常采取总-分-总和生活化的讲解方式来阐述一个知识点&#xff01; 码…

【系统架构设计师-2012年】综合知识-答案及详解

更多内容请见&#xff1a; 备考系统架构设计师-核心总结索引 文章目录 【第1~2题】【第3~4题】【第5题】【第6题】【第7题】【第8题】【第9题】【第10~11题】【第12~13题】【第14~19题】【第20~21题】【第22~24题】【第25~26题】【第27~31题】【第32~33题】【第34~36题】【第37…

南京大学机试试题合集

&#x1f370;&#x1f370;&#x1f370;hello宝子们&#xff0c;今天我们来练习南京大学的机试题目&#xff0c;这些题目的缺点就是太老了&#xff0c;都是18或19年的题&#xff0c;大家就练练手。加油&#xff01;fighting&#xff01;( •̀ ω •́ )✧ &#x1f369;1161…

geodatatool(地图资源工具)3.8

geodatatool&#xff08;地图资源工具&#xff09;3.8&#xff08;新&#xff09;修复更新&#xff0c;修复更新包括&#xff1a; 1.优化在线地图多线程下载及用户体验。 注意&#xff1a;在线地图下载与背景地图显示用的是同样的源&#xff0c;所以在线地图是否能下载&#x…

通过Jflash合并程序以 BOOT + APP 合并为例

打开【jflash】新建一个JFash工程 建好后界面如下 打开【File】下面的【Open data file…】 找到Boot程序所在位置 打开后界面如下&#xff0c;可以看到hex中的数据 点击【File】下面的【Merge data file…】 打开应用程序 查看APP地址区域是否有数据&#xff0c…