jsPDF導出PDF寬大于高異常處理
情況說明
在將HTML內(nèi)容區(qū)導出PDF時，按width和height的相對大小可以分為瘦長區(qū)域（下圖藍框）和扁寬區(qū)域（下圖紅框）兩種情況。
我寫的pdf導出邏輯在導出瘦長區(qū)域時沒問題，在導出扁寬區(qū)域時，會出現(xiàn)PDF內(nèi)容橫向被截斷的情況（橫向展示不全）。
舉例如下面兩張圖片。
問題所在
html導出pdf經(jīng)過了2個步驟：
1.html -> img (沒問題)
2.img -> pdf (出了問題)
將img轉為pdf并導出用的是jsPDF。
jsPDF使用時分為3個步驟：
1.const pdf = new jsPDF(args); 創(chuàng)建一個指定尺寸的空白的PDF，把它想象成畫布。
2.pdf.addImage(args); args有一系列的參數(shù)，在畫布的指定位置放入圖片。
3.pdf.save(fileName); 導出pdf。
問題出在第1步，創(chuàng)建空白的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 內(nèi)容區(qū), (scrollWidth > scrollHeight)
畫布的尺寸和HTML的內(nèi)容區(qū)尺寸對不上, HTML的右側會被截斷。
解決方案
scrollWidth > scrollHeight的時候，做一個A4紙比例的畫布 寬:高 = 1 : 1.414 (簡化為1 : 1.4)
且 寬度 等于 scrollWidth。
即
pageSizeArr = [scrollWidth, 1.4 * scrollWidth];
以上就是jsPDF導出PDF寬大于高異常處理的詳細內(nèi)容，更多關于js導出PDF寬高異常處理的資料請關注腳本之家其它相關文章！
相關文章
csdn 博客中實現(xiàn)運行代碼功能實現(xiàn)
有時候因為csdn的博客經(jīng)常處理一些字符，導致代碼很多情況下，都不能正常運行，給大家的閱讀帶來了麻煩，下面是腳本之家編輯簡單的整理下。2009-08-08
layui下拉列表select實現(xiàn)可輸入查找的方法
今天小編就為大家分享一篇layui下拉列表select實現(xiàn)可輸入查找的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
web開發(fā)中不可避免會使用js，為了給頁面良好的瘦身我們一般都會將js代碼放在外部，然后通過src引用，如果web頁面與js采用的編碼不同一就會產(chǎn)生亂碼，接下來與大家分享下解決方法，感興趣的朋友可以參考下哈2013-04-04
瀏覽器事件指載入文檔直到該文檔被關閉期間的瀏覽器事件，如瀏覽器載入文檔事件onload、關閉該文檔事件onunload、瀏覽器失去焦點事件onblur、獲得焦點事件onfocus 等2012-03-03
在鴻蒙系統(tǒng)中實現(xiàn)圖片上傳功能,整體流程可以類比為?“選快遞→填單→發(fā)貨→簽收”?的過程,下面給大家介紹鴻蒙系統(tǒng)中實現(xiàn)圖片上傳功能全流程,感興趣的朋友一起看看吧2025-04-04
要做一個異步登錄，打算給用戶做一點提示，所以就網(wǎng)上找了點代碼，自己修改新增了一些，做了一個html+css+js的功能封裝,供大家參考，需要的朋友參考下吧2017-02-02
又是一年新春之際，祝福大家兔年快樂！給大家介紹一個有趣的動效（兼容?IE），頁面右下角有一只搞怪的兔子，鼠標在頁面中懸停時，兔子會跟著做出不同的動作和表情，感興趣的小伙伴可以了解一下2023-01-01
這篇文章主要介紹了javascript 實現(xiàn)字符串反轉的三種方法，有需要的朋友可以參考一下2013-11-11
67 個節(jié)約開發(fā)時間的前端開發(fā)者的工具、庫和資源
在本文中，我不會去談 React、Angular、Vue 等等這些大的前端框架，也不會談 Atom、VS code、Sublime 等等這些已經(jīng)很出名的代碼編輯器，我只是想簡單的分享一套我認為有助于提升開發(fā)者工作流的工具集2017-09-09
這篇文章主要介紹了javascript中使用未定義變量或值的情況,較為詳細的分析了javascript中使用未定義值的情況,需要的朋友可以參考下2016-07-07