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宽高异常处理的资料请关注脚本之家其它相关文章！

最新评论