如何使用JSPDF新的HTML API从HTML生成PDF时如何给出宽度，高度，X和Y坐标

Question

我一直在使用JSPDF基于某些HTML生成PDF文档。较早使用JSPDF FromHTML API，我们可以给出这样的边距

      var margins2 = {
      top: 415,
      bottom: 10,
      left: 55,
      width: 300
  };
  doc.fromHTML(reactListContent, margins2.left, margins2.top, {
    'width': margins2.width,
    'elementHandlers': specialElementHandlers
  }, margins2);

但是，在新的.html API中，我如何提供边距，宽度和高度。新的API就像

var pdf = new jsPDF('p', 'pt', 'letter');
pdf.html(document.getElementById('html'), {
    callback: function (pdf) {
      console.log("how to get margins");
    }
});

Answer 1

如果您查看jspdf.debug.js的源代码， html.js具有x和y偏移的选项。

opt: {
    filename: 'file.pdf',
    margin: [0, 0, 0, 0],
    enableLinks: true,
    x: 0,
    y: 0,
    html2canvas: {},
    jsPDF: {}
}

因此，您可以设置X和Y坐标：

pdf.html(document.getElementById('html'), {
    x: 36,
    y: 36,
    callback: function () {
        // pdf.save('test.pdf');
        window.open(pdf.output('bloburl')); // to debug
    }
});

不幸的是，我不能通过修改margin: [0, 0, 0, 0]做同样的事情。看起来他们仍在处理这个问题。因此，简短的答案是尚未。

一个工作是通过边缘计算HTML2Canvas的规模：

let pdf = new jsPDF('p', 'pt', 'a4');
let margin = 36; // narrow margin - 12.7 mm
let srcwidth = document.getElementById('html').scrollWidth;
let scale = (595.28 - margin * 2) / srcwidth; // a4 pageSize 595.28
pdf.html(document.getElementById('html'), {
    backgroundColor: 'lightyellow',
    html2canvas: {
        scale: scale // default is window.devicePixelRatio,
    },
    x: margin,
    y: margin,
    callback: function () {
        window.open(pdf.output('bloburl'));
    }
});