jsPDF导出PDF宽大于高异常处理
情况说明
在将HTML内容区导出PDF时，按width和height的相对大小可以分为瘦长区域（下图蓝框）和扁宽区域（下图红框）两种情况。
我写的pdf导出逻辑在导出瘦长区域时没问题，在导出扁宽区域时，会出现PDF内容横向被截断的情况（横向展示不全）。
举例如下面两张图片。
问题所在
html导出pdf经过了2个步骤：
1.html -> img (没问题)
2.img -> pdf (出了问题)
将img转为pdf并导出用的是jsPDF。
jsPDF使用时分为3个步骤：
1.const pdf = new jsPDF(args); 创建一个指定尺寸的空白的PDF，把它想象成画布。
2.pdf.addImage(args); args有一系列的参数，在画布的指定位置放入图片。
3.pdf.save(fileName); 导出pdf。
问题出在第1步，创建空白的pdf画布。
new jsPDF(options) 官方文档
https://artskydj.github.io/jsPDF/docs/jsPDF.html
关注format，官方文档里写了支持array，形如[595.28, 841.89] （问题就在这）
const pdf = new jsPDF("", "pt", pageSizeArr);若 我们想要一个宽1000,高500的画布
很自然的想到pageSizeArr = [1000, 500]
但这样的输入，JSPDF会生成一个 宽500 高1000的画布
也就是说
pageSizeArr = [1000, 500]
或 pageSizeArr = [500, 1000]
jsPDF会都生成 宽500 高1000的画布 (!!!!!!!!)
在项目中，我的pageSizeArr设置如下
pageSizeArr = [scrollWidth, scrollHeight];
这种情况下，如果真的需要导出一个扁宽的HTML 内容区, (scrollWidth > scrollHeight)
画布的尺寸和HTML的内容区尺寸对不上, HTML的右侧会被截断。
解决方案
scrollWidth > scrollHeight的时候，做一个A4纸比例的画布 宽:高 = 1 : 1.414 (简化为1 : 1.4)
且 宽度 等于 scrollWidth。
即
pageSizeArr = [scrollWidth, 1.4 * scrollWidth];
以上就是jsPDF导出PDF宽大于高异常处理的详细内容，更多关于js导出PDF宽高异常处理的资料请关注脚本之家其它相关文章！
相关文章
在Electron开发过程中,每次代码修改后需手动重新启动应用,这一过程可以通过引入Nodemon工具自动化,Nodemon能够监测文件变化并自动重启服务器,本文给大家介绍Electron 使用 Nodemon 配置自动重启,感兴趣的朋友一起看看吧2024-09-09
这篇文章主要介绍了JS简单实现多级Select联动菜单效果代码,涉及JavaScript数组元素的遍历及动态设置select的实现技巧,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了js简单实现调整网页字体大小的方法,通过javascript动态修改页面元素样式实现调整网页字体的功能,非常简单实用,需要的朋友可以参考下2016-07-07
这篇文章主要为大家详细介绍了基于JavaScript实现每日签到打卡轨迹功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了layui数据表格实现重载数据表格功能，以搜索功能为例进行讲解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了javascript中setInterval的用法的相关资料,需要的朋友可以参考下2015-07-07
这篇文章主要给大家介绍了关于js实现简单的点名器随机色的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
在微信小程序的开发中,我们会经常遇到页面间数据传递或者相互影响的问题,下面这篇文章主要给大家介绍了关于微信小程序传值(传递数据)的一些方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
EventSource是HTML5中的一种新的API,用来实现服务器端向客户端推送事件,相比于常规的轮询方式,EventSource可以实现更加高效、低延迟的数据传输,这篇文章主要介绍了解决EventSource 删除单词的前置空格问题记录,需要的朋友可以参考下2024-03-03
本文向大家介绍了javascript中常见的3种获取元素的方法，分别是通过元素ID、通过标签名字和通过类名字来获取，并附上了示例，希望大家能够喜欢。2015-03-03
最新评论