情況說明

在將HTML內(nèi)容區(qū)導(dǎo)出PDF時(shí)，按width和height的相對大小可以分為瘦長區(qū)域（下圖藍(lán)框）和扁寬區(qū)域（下圖紅框）兩種情況。

我寫的pdf導(dǎo)出邏輯在導(dǎo)出瘦長區(qū)域時(shí)沒問題，在導(dǎo)出扁寬區(qū)域時(shí)，會(huì)出現(xiàn)PDF內(nèi)容橫向被截?cái)嗟那闆r（橫向展示不全）。

舉例如下面兩張圖片。

問題所在

html導(dǎo)出pdf經(jīng)過了2個(gè)步驟：

1.html -> img (沒問題)

2.img -> pdf (出了問題)

將img轉(zhuǎn)為pdf并導(dǎo)出用的是jsPDF。

jsPDF使用時(shí)分為3個(gè)步驟：

1.const pdf = new jsPDF(args); 創(chuàng)建一個(gè)指定尺寸的空白的PDF，把它想象成畫布。

2.pdf.addImage(args); args有一系列的參數(shù)，在畫布的指定位置放入圖片。

3.pdf.save(fileName); 導(dǎo)出pdf。

問題出在第1步，創(chuàng)建空白的pdf畫布。

new jsPDF(options) 官方文檔 

https://artskydj.github.io/jsPDF/docs/jsPDF.html

關(guān)注format，官方文檔里寫了支持array，形如[595.28, 841.89] （問題就在這）

const pdf = new jsPDF("", "pt", pageSizeArr);

若 我們想要一個(gè)寬1000,高500的畫布

很自然的想到pageSizeArr = [1000, 500]

但這樣的輸入，JSPDF會(huì)生成一個(gè) 寬500 高1000的畫布

也就是說

pageSizeArr = [1000, 500]
或 pageSizeArr = [500, 1000]

jsPDF會(huì)都生成 寬500 高1000的畫布 (!!!!!!!!)

在項(xiàng)目中，我的pageSizeArr設(shè)置如下

pageSizeArr = [scrollWidth, scrollHeight];

這種情況下，如果真的需要導(dǎo)出一個(gè)扁寬的HTML 內(nèi)容區(qū), (scrollWidth > scrollHeight)

畫布的尺寸和HTML的內(nèi)容區(qū)尺寸對不上, HTML的右側(cè)會(huì)被截?cái)唷?/p>

解決方案

scrollWidth > scrollHeight的時(shí)候，做一個(gè)A4紙比例的畫布 寬:高 = 1 : 1.414 (簡化為1 : 1.4)

且 寬度 等于 scrollWidth。

即

pageSizeArr = [scrollWidth, 1.4 * scrollWidth];

以上就是jsPDF導(dǎo)出PDF寬大于高異常處理的詳細(xì)內(nèi)容，更多關(guān)于js導(dǎo)出PDF寬高異常處理的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論