Реагировать на разделение страниц pdf статическим - PullRequest
Новая
       95

Реагировать на разделение страниц pdf статическим

4 голосов
/ 05 мая 2020

В моем приложении React есть длинная страница, которую я хочу экспортировать в формате 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 сверху. Я знаю, это потому, что эти 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: 1-я страница: 

<Component1 />
<Component2 break/>

2-я страница: 

<Component3 />
<Component4 break/>

3-я страница: 

<Component5 />
<Component6 />

ОБНОВЛЕНИЕ:

Вот как выглядит вырезка: enter image description here

1 Ответ

0 голосов
/ 17 мая 2020

Вы должны иметь возможность сделать это с помощью свойства break-before CSS

https://developer.mozilla.org/en-US/docs/Web/CSS/break-before

...