jsPDF與div高度的多頁 - 無法確定高度

我想從動態高度和寬度的html div生成PDF。以下是代碼。jsPDF與div高度的多頁 - 無法確定高度

let pages = this.rootDataContainer.nativeElement.getElementsByClassName('pdfpage'); 

    for (let i = 0; i < pages.length; i++) { 
      this.pdfDoc.addHTML(pages[i], 0, 0, options,() => { 
       let pxHeight = pages[i].offsetHeight/scaleFactor; 
       this.pdfDoc.addPage(0, pxHeight); 
       this.counter = this.counter - 1; 
      }); 
     }

有幾個我面臨的問題。

由於addHTML是異步的，頁面以隨機方式添加到pdf中。
pdf頁面的高度要麼高或低。

有什麼辦法可以設置pdf大小和同步頁面的順序。

來源

2017-09-01 Aswartha

要同步我會用遞歸方法，如：

EDITED：

var pages = document.getElementsByClassName("pdfpage"); 
var pdfDoc = new jsPDF('p', 'pt', [0, 0]); 
pdfDoc.deletePage(1); 
pdfDoc.addPage(pages[0].clientWidth, pages[0].clientHeight); 

var addDivToPdf = function(pageNr) { 
    pdfDoc.addHTML(pages[pageNr], 0, 0, {background:"#FFF"},() => { 
    if (++pageNr < pages.length) { 
     //New added DIV dimensions here 
     pdfDoc.addPage(pages[pageNr].clientWidth, pages[pageNr].clientHeight); 
     addDivToPdf(pageNr); 
    } else { 
     pdfDoc.save("sample-file.pdf"); 
    } 
    }); 
};

注意我沒有for循環使用。這樣，只有當前一頁完成時纔會添加下一頁。

對於身高，我不確定，scaleFactor必須有錯誤的單位。如果您希望所有頁面具有相同的尺寸，或者您希望不同的尺寸與DIV高度相匹配，則不太清楚。

UPDATE：要控制與所述的DIV尺寸根據widht和高度，我在pdfDoc構造「表示PT」：

var pdfDoc = new jsPDF('p', 'pt', [0, 0]);

然而第一頁似乎具有總是一個標準尺寸，所以我刪除它並在添加第一個DIV之前再次添加所需的大小。其他頁面可以按照正常流程：

pdfDoc.deletePage(1); 
pdfDoc.addPage(pages[0].clientWidth, pages[0].clientHeight);

的CodePen更新： https://codepen.io/zameb/pen/BdbEVr

來源

2017-09-04 02:17:20 zameb

這段代碼解決了我的頁同步的問題，但無法修復的高度.. :(如果我的DIV大小爲100px的寬度。和100px的高度，我想在PDF中也有相同的高度 – Aswartha

已應用了一些編輯，檢查它是否適合您的需求 – zameb

seems var pdfDoc = new jsPDF（'p'，'pt'，[0，0]）;＆頁[ 0] .clientHeight這是幫助獲得高度..但不是寬度.. :( – Aswartha

jsPDF與div高度的多頁 - 無法確定高度

回答

相關問題