Question

我正在尝试从动态高度和宽度的html div生成pdf。下面是代码。

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大小并同步页面顺序。

Answer 1

要同步，我会使用递归方法，如：

<强> 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 ：为了根据DIVs大小控制widht和height，我在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

具有div高度的jsPDF多页 - 无法确定高度

1 个答案: