react html div导出pdf,带有html2canvas，react和jsPDF的多页pdf

我正在尝试使用html2canvas和jsPDF在React应用程序中创建多页pdf。我从this问题开始，提供了凯尔·贝克(Kyle Baker)提供的解决方案，但是该解决方案并不完善，因为它不能很好地处理页边距，或者当您不想拆分某些内容时无法启动新页面。有谁能提供有关如何增加/控制页边距，缩小/缩放图像以及为组件上的新页面拆分的见解？这是原始的解决方案：

function makePDF() {

var quotes = document.getElementById('container-fluid');

html2canvas(quotes, {

onrendered: function(canvas) {

//! MAKE YOUR PDF

var pdf = new jsPDF('p', 'pt', 'letter');

for (var i = 0; i <= quotes.clientHeight/980; i++) {

//! This is all just html2canvas stuff

var srcImg = canvas;

var sX = 0;

var sY = 980*i; // start 980 pixels down for every new page

var sWidth = 900;

var sHeight = 980;

var dX = 0;

var dY = 0;

var dWidth = 900;

var dHeight = 980;

window.onePageCanvas = document.createElement("canvas");

onePageCanvas.setAttribute('width', 900);

onePageCanvas.setAttribute('height', 980);

var ctx = onePageCanvas.getContext('2d');

// details on this usage of this function:

// https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing

ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

// document.body.appendChild(canvas);

var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);

var width = onePageCanvas.width;

var height = onePageCanvas.clientHeight;

//! If we're on anything other than the first page,

// add another page

if (i > 0) {

pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)

}

//! now we declare that we're working on that page

pdf.setPage(i+1);

//! now we add content to that page!

pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));

}

//! after the for loop is finished running, we save the pdf.

pdf.save('Test.pdf');

}

});

}

非常感谢@KyleBaker提供此代码！