【无标题】使用html2canvas和jspdf生成的pdf在不同大小的屏幕下文字大小不一样

news2024/11/17 19:44:59

问题:使用html2canvas和jspdf生成的pdf在不同大小的屏幕下文字大小不一样,在mac下,一切正常,看起来很舒服,但是当我把页面放在扩展屏幕下(27寸),再生成一个pdf,虽然排版一样,但是文字就变得非常小
在这里插入图片描述
在这里插入图片描述
下面的是在mac下的,上面是在扩展屏幕下的,最开始我以为是文字大小问题,我是一直在扩展屏幕上进行测试的,但我把页面拖拽回mac上时,我发现生成的pdf是正常的,这时我就猜测应该不是文字大小的问题

尝试:将canvas打印出来

const pdfContent = document.querySelector('.pdf-content')
html2canvas(pdfContent).then((canvas) => {
	console.log(canvas)
})

打印结果就是 canvas的 height 和 width在不同屏幕上时不一样的,这个时候我设置了html2canvas的属性

html2canvas(pdfContent, {
	width: 1407,
	height: 936
}).then((canvas) => {
	console.log(canvas)
})

数据具体怎么来的下面再说,然后打印预览发现
在这里插入图片描述
图片没有撑满,还是不对
真正影响截取的图片宽高的时 Window.innerWidth 这个属性
这个属性可以通过 ownerDocument.defaultView.innerHeight来获取,当我们打印出来 ownerDocument.defaultView这个属性,发现里面有 innerHeight 和 innerWidth 这两个属性,在mac上打印预览正常下的 这两个属性值 宽为1407 高为936,那就将这两个属性写死,就可以保证在所有屏幕下 渲染出来的图片都是一致的

完整代码

const generatePDF = () => {
	if (haveData.value == true) {
		const pdfContent = document.querySelector('.pdf-content')
		console.log(pdfContent.ownerDocument.defaultView)
		pdfContent.ownerDocument.defaultView.innerHeight = 936 
		pdfContent.ownerDocument.defaultView.innerWidth = 1407
		pdfContent.ownerDocument.defaultView.devicePixelRatio = 2
		html2canvas(pdfContent).then((canvas) => {
			console.log(canvas)
			const imgData = canvas.toDataURL('image/png', 1.0)
			const pdf = new jsPDF('p', 'mm', 'a4')
			const a4w = 190; const a4h = 277
			pdf.addImage(imgData, 'PNG', 10, 10, a4w, Math.min(a4h, a4w * canvas.height / canvas.width))
			pdf.setFontSize(20)
			pdf.save(`${valueMonth.value}月报.pdf`)
		})
	} else {
		message.warning('本月暂无数据可导出')
	}
}

这样 就可以在任何屏幕下 得到相同大小和相同文字大小的 pdf了

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

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

相关文章

深入理解Windows操作系统机制(二)

我是荔园微风,作为一名在IT界整整25年的老兵,今天我们来重新审视一下Windows这个我们熟悉的不能再熟悉的系统。 我们每天都在用Windows操作系统,但是其实我们每天直接在打交道的并不是Windows操作系统的内核,而是Windows操作系统…

Linux 磁盘满了的解决方案

步骤说明: 第一步:查看磁盘情况 我们要知道哪个磁盘,我们首先要知道各个磁盘占用情况!可以使用以下命令 # 查看磁盘状态 df -h 解释一下: df: 用于显示目前在Linux系统上的文件系统的磁盘使用情况统计。 -h&…

为 GitHub 设置 SSH 密钥

1. 起因 给自己的 github 改个名,顺便就给原来 Hexo 对应的仓库也改了个名。然后发现 ubhexo clean && hexo generate && hexo deploy 失败了,报错如下: INFO Deploying: git INFO Clearing .deploy_git folder... INFO …

【淘宝API接口系列】,商品详情接口响应参数有哪些?响应示例是否满足

商品数据:淘宝提供了商品的基本信息,包括商品名称、描述、规格、价格、销量、库存等信息。此外,也可以通过淘宝提供的API接口来获取商品的图片、评价、物流信息等详细数据。 响应参数 Version: Date:2022-04-04 名称类型必须示例值描述 ite…

设计模式概述及七大原则

一、设计模式的目的 编写软件过程中,我们会面临着来自耦合性,内聚性以及可维护性,可扩展性,重用性,灵活性等多方面的挑战,设计模式是为了让程序(软件),具有更好: 代码重用性 (即&a…

微信小程序下拉刷新获取数据和触底事件刷新实现

一、下拉刷新 1.json文件 说明:开启下拉刷新,然后设置窗口的背景色,方便观看。 "enablePullDownRefresh": true,"backgroundColor":"#FFC0CB" 2. js文件 说明:重新发起请求,并显示加…

c++11 标准模板(STL)(std::basic_istream)(八)

定义于头文件 <istream> template< class CharT, class Traits std::char_traits<CharT> > class basic_istream : virtual public std::basic_ios<CharT, Traits> 类模板 basic_istream 提供字符流上的高层输入支持。受支持操作包含带格式的…

【AT89C52单片机项目】音乐播放器的设计

实验目的 用51系列单片机设计一个可以切歌的音乐播放器。 实验仪器 AT89C52单片机。 音乐播放模块。 设计要求 采用重装定时器计数方式1的初值来实现发出不同频率的声音&#xff0c;通过控制延时长度来实现不同的节拍&#xff0c;之后将音乐数据表填入&#xff0c;即可实…

【python】python汽车保险数据分析(数据+代码+报告)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、51CTO技术博主 &#x…

【C++/嵌入式笔试面试八股】三、01.ARM体系架构 | 中断与异常

ARM体系架构 ARM 01.ARM产品线、 02.ARM体系结构 03.ARM硬件系统组成和运行原理🍊 直接在flash上执行较慢(NOR flash可以直接运行,NAND flash不行,按块访问),搬到内存运行,叫重定位 控制器负责取值译码 ALU负责运算 寄存器负责暂存数据 一条机器指令的执行过程,包含

SpringBoot中整合Sharding Sphere实现数据加解密/数据脱敏/数据库密文,查询明文

场景 为防止数据泄露&#xff0c;需要在插入等操作时将某表的字段在数据库中加密存储&#xff0c;在需要查询使用时明文显示。 Sharding Sphere ShardingSphere是一套开源的分布式数据库中间件解决方案组成的生态圈&#xff0c; 它由Sharding-JDBC、Sharding-Proxy和Shardi…

如何采集来赞达Lazada虾皮shopee各区域商品详情页面数据

以虾皮shopee根据ID取商品详情 API 返回值说明为例 shopee.item_get 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;注册Key和secret接入secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&am…

C++学习之static关键字小结

static在C编程中随处可见&#xff0c;但是其真实的使用方式没有总结过&#xff0c;因此在使用中经常出一些问题&#xff0c;下面就C编程中static关键字在的几种用法进行相关总结说明如下。 1、在函数内部定义带有static关键字的变量时&#xff0c;则变量是保存在静态存储区的&…

[QT编程系列-13]:QT快速学习 - 1- 初识

目录 第1章 QT的介绍 1.1 QT VS MFC 1.2 QT历史 1.3 QT的应用 1.4 QT学习方法 1.5 QT对象树 1.6 2-8定律 1.7 QT优势&#xff1a; 1.8 QT支持的平台 第2章 QT UI是各种控件对象的堆积 第3章 QT UI是各种控件的堆积 第4章 控件窗口的控制 第1章 QT的介绍 1.1 QT V…

【广州华锐互动】VR石油化工作业实训平台

VR石油化工作业实训平台是一种基于虚拟现实技术的教学、科研辅助工具&#xff0c;可以提供交互式的实验环境&#xff0c;让学生和研究人员在虚拟环境中进行实验。该系统可以帮助学生更好地理解石油炼制过程中的各个环节&#xff0c;包括原油加工、分离、精制等。 通过这种方式…

Python 数据管理

数据管理是收集、收集原始数据并将其转换为另一种格式的过程&#xff0c;以便在更短的时间内更好地理解、决策、访问和分析。 数据管理的重要性 数据管理是数据科学项目中非常重要的一步。下面的例子将解释它的重要性&#xff1a; 图书销售网站希望显示不同领域的畅销书&#…

推荐一款IDEA神级插件【Bito】而且免费!

什么是Bito&#xff1f; Bito是一款在IntelliJ IDEA编辑器中的插件&#xff0c;Bito插件是由ChatGPT团队开发的&#xff0c;它是ChatGPT团队为了提高开发效率而开发的一款工具。ChatGPT团队是一支专注于自然语言处理技术的团队&#xff0c;他们开发了一款基于GPT的自然语言处理…

轮播图,用vue来写一个简单的轮播图

轮播图&#xff0c;用vue来写一个简单的轮播图 写的很简单&#xff0c;就是一个小练习&#xff0c;哈哈哈&#xff0c;下面的几张图分别是轮播图的第一张&#xff0c;中间图&#xff0c;最后一张的效果图。 使用了vue 中的属性绑定 v-bind ,v-show 以及 事件监听 v-on 指令。 思…

NZ13:VBA给数据加密处理

【分享成果&#xff0c;随喜正能量】爱出者爱返&#xff0c;福往者福来。怀揣一颗善良的心&#xff0c;本本分分&#xff0c;坦坦荡荡&#xff0c;多去帮助需要的人&#xff0c;坚持善良做人&#xff0c;才能不负于人&#xff0c;不负自己。。 我的教程一共九套及VBA汉英手册一…

黄皮书-线接触热弹流润滑 Fortran+Matlab转译代码

原Fortran代码有错误&#xff0c;进行了修改&#xff0c;数值上差别不大。根据Fortran代码转的Matlab&#xff0c;可以完美运行&#xff0c;但是因为精度问题有差异&#xff0c;只能说趋势是一致的。 需要私我-资源里只是Fortran运行结果