在我的React App中，我有一个很长的页面，我希望能够将其导出为PDF格式。我已经通过使用html2canvas和jsPDF实现了这一目标。这只是导出它的代码：
html2canvas(document.body).then((canvas) => {
var imgData = canvas.toDataURL("image/png");
var imgWidth = 210;
var pageHeight = 295;
var imgHeight = (canvas.height * imgWidth) / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF("p", "mm");
var position = 0;
doc.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
doc.save("file.pdf");
});
这确实非常好，并且可以完美导出所有内容，但是会将页面的某些部分切割成2个部分-如果该元素从底部的第1页开始，则在顶部的第2页结束。我知道是因为这两个道具imgWidth，imgHeight。是否可以手动在我的组件（整个导出页面的一部分）中放置某些内容，以显示应该在何处中断并开始另一个页面？我的意思是如果整个页面是：
<Component 1/>
<Component 2/>
<Component 3/>
<Component 4/>
<Component 5/>
<Component 6/>
为了能够做到：
<Component1 />
<Component2 break/>
<Component3 />
<Component4 break/>
<Component5 />
<Component6 />
所以基本上，我将拥有3页PDF：第一页：
<Component1 />
<Component2 break/>
第二页：
<Component3 />
<Component4 break/>
第三页：
<Component5 />
<Component6 />
您应该可以通过break-before CSS属性来执行此操作>
https://developer.mozilla.org/en-US/docs/Web/CSS/break-before