状况阐明:
在将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) 官网文档在上面linkhttps://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];
完结!
同步更新到本人的语雀
https://www.yuque.com/diracke...