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宽高异常处理的资料请关注脚本之家其它相关文章！
相关文章
有时候因为csdn的博客经常处理一些字符，导致代码很多情况下，都不能正常运行，给大家的阅读带来了麻烦，下面是脚本之家编辑简单的整理下。2009-08-08
今天小编就为大家分享一篇layui下拉列表select实现可输入查找的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
web开发中不可避免会使用js，为了给页面良好的瘦身我们一般都会将js代码放在外部，然后通过src引用，如果web页面与js采用的编码不同一就会产生乱码，接下来与大家分享下解决方法，感兴趣的朋友可以参考下哈2013-04-04
浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等2012-03-03
在鸿蒙系统中实现图片上传功能,整体流程可以类比为 “选快递→填单→发货→签收” 的过程,下面给大家介绍鸿蒙系统中实现图片上传功能全流程,感兴趣的朋友一起看看吧2025-04-04
要做一个异步登录，打算给用户做一点提示，所以就网上找了点代码，自己修改新增了一些，做了一个html+css+js的功能封装,供大家参考，需要的朋友参考下吧2017-02-02
又是一年新春之际，祝福大家兔年快乐！给大家介绍一个有趣的动效（兼容 IE），页面右下角有一只搞怪的兔子，鼠标在页面中悬停时，兔子会跟着做出不同的动作和表情，感兴趣的小伙伴可以了解一下2023-01-01
这篇文章主要介绍了javascript 实现字符串反转的三种方法，有需要的朋友可以参考一下2013-11-11
在本文中，我不会去谈 React、Angular、Vue 等等这些大的前端框架，也不会谈 Atom、VS code、Sublime 等等这些已经很出名的代码编辑器，我只是想简单的分享一套我认为有助于提升开发者工作流的工具集2017-09-09
这篇文章主要介绍了javascript中使用未定义变量或值的情况,较为详细的分析了javascript中使用未定义值的情况,需要的朋友可以参考下2016-07-07
最新评论