jsPDF導(dǎo)出PDF寬大于高異常處理
情況說明
在將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)文章！
相關(guān)文章
csdn 博客中實(shí)現(xiàn)運(yùn)行代碼功能實(shí)現(xiàn)
有時(shí)候因?yàn)閏sdn的博客經(jīng)常處理一些字符，導(dǎo)致代碼很多情況下，都不能正常運(yùn)行，給大家的閱讀帶來了麻煩，下面是腳本之家編輯簡單的整理下。2009-08-08
layui下拉列表select實(shí)現(xiàn)可輸入查找的方法
今天小編就為大家分享一篇layui下拉列表select實(shí)現(xiàn)可輸入查找的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
web開發(fā)中不可避免會(huì)使用js，為了給頁面良好的瘦身我們一般都會(huì)將js代碼放在外部，然后通過src引用，如果web頁面與js采用的編碼不同一就會(huì)產(chǎn)生亂碼，接下來與大家分享下解決方法，感興趣的朋友可以參考下哈2013-04-04
瀏覽器事件指載入文檔直到該文檔被關(guān)閉期間的瀏覽器事件，如瀏覽器載入文檔事件onload、關(guān)閉該文檔事件onunload、瀏覽器失去焦點(diǎn)事件onblur、獲得焦點(diǎn)事件onfocus 等2012-03-03
鴻蒙系統(tǒng)中實(shí)現(xiàn)圖片上傳功能全流程
在鴻蒙系統(tǒng)中實(shí)現(xiàn)圖片上傳功能,整體流程可以類比為?“選快遞→填單→發(fā)貨→簽收”?的過程,下面給大家介紹鴻蒙系統(tǒng)中實(shí)現(xiàn)圖片上傳功能全流程,感興趣的朋友一起看看吧2025-04-04
要做一個(gè)異步登錄，打算給用戶做一點(diǎn)提示，所以就網(wǎng)上找了點(diǎn)代碼，自己修改新增了一些，做了一個(gè)html+css+js的功能封裝,供大家參考，需要的朋友參考下吧2017-02-02
利用JavaScript制作一個(gè)搞怪的兔子動(dòng)畫效果
又是一年新春之際，祝福大家兔年快樂！給大家介紹一個(gè)有趣的動(dòng)效（兼容?IE），頁面右下角有一只搞怪的兔子，鼠標(biāo)在頁面中懸停時(shí)，兔子會(huì)跟著做出不同的動(dòng)作和表情，感興趣的小伙伴可以了解一下2023-01-01
javascript 實(shí)現(xiàn)字符串反轉(zhuǎn)的三種方法
這篇文章主要介紹了javascript 實(shí)現(xiàn)字符串反轉(zhuǎn)的三種方法，有需要的朋友可以參考一下2013-11-11
67 個(gè)節(jié)約開發(fā)時(shí)間的前端開發(fā)者的工具、庫和資源
在本文中，我不會(huì)去談 React、Angular、Vue 等等這些大的前端框架，也不會(huì)談 Atom、VS code、Sublime 等等這些已經(jīng)很出名的代碼編輯器，我只是想簡單的分享一套我認(rèn)為有助于提升開發(fā)者工作流的工具集2017-09-09
這篇文章主要介紹了javascript中使用未定義變量或值的情況,較為詳細(xì)的分析了javascript中使用未定義值的情況,需要的朋友可以參考下2016-07-07