jspdf用法


介紹一下純jspdf用法,將一個圖片列表導出為pdf文件,根據圖片寬高計算在pdf中的位置

jsPDF 是一個基於 HTML5 的客戶端解決方案,用於生成各種用途的 PDF 文檔。

1、安裝:npm install jspdf

2、引入:import jsPDF from "jspdf"

3、使用:

let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);

第一個參數: l:橫向  p:縱向

第二個參數:測量單位("pt","mm", "cm", "m", "in" or "px")

第三個參數:可以是下面格式,默認為“a4”

  • a0 - a10
  • b0 - b10
  • c0 - c10
  • dl
  • letter
  • government-letter
  • legal
  • junior-legal
  • ledger
  • tabloid
  • credit-card

默認為“a4”。如果您想使用自己的格式,只需將大小作為數字數組傳遞,例如[595.28, 841.89];

4、常用操作:

pdf.addPage()  在PDF文檔中添加新頁面,參數如下,也可以不設置,默認a4

pdf.addImage()  將圖像添加到PDF,addImage參數設置如下:

刪除某頁pdf:

  1.  
    let targetPage = pdf.internal.getNumberOfPages(); //獲取總頁
  2.  
    pdf.deletePage(targetPage); // 刪除目標頁

保存pdf文檔:

 pdf.save(`測試.pdf`);

 

Example:

1、導出一整頁pdf文件,根據圖片高度動態設置pdf的位置,根據自己的數據格式組裝導出方法 /**

* 導出PDF一頁 PDF中的頁面寬度或高度不能超過14400個userUnit。jsPDF將寬度/高度限制為14400

* @param pageList

*/

const exportPdf = (pageList: any) => {

let [imgX, imgY] = [595.28, 841.89]; // a4紙尺寸[595.28, 841.89];

var pdfX = imgX 

var pdfY = getLength(pageList);

let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]); //l:橫向 p:縱向

 let isAddpage = 0;

for (let [index, item] of pageList.entries()) {

 for (let j = 0; j < item.imageList.length; j++) { 

const image = item.imageList[j];

let imgHeight = imgX / (image.width / image.height);

pdf.addImage(image.data, 'JPEG', 0, isAddpage, imgX, imgHeight);

isAddpage += imgHeight;

  } 

} 

pdf.save(`全部教材_${getTime()}.pdf`); 

}

2、分頁導出

const exportPdf = (pageList: any) => {

let [imgX, imgY] = [595.28, 841.89];

let pdf = new jsPDF('p', 'pt', 'a4');

for (let [index, item] of pageList.entries()) { 

for (let j = 0; j < item.imageList.length; j++) {

const image = item.imageList[j];

let imgHeight = imgX / (image.width / image.height); //根據寬度計算高度

pdf.addImage(image.data, 'JPEG', 0, 0, imgX, imgHeight);

pdf.addPage();

let targetPage = pdf.internal.getNumberOfPages();

pdf.deletePage(targetPage); // 刪除最后一頁

pdf.save(`測試.pdf`);

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM