Как сделать так, чтобы холст разделился на 2 или более страниц, не обрезаясь? - PullRequest
Новая
       25

Как сделать так, чтобы холст разделился на 2 или более страниц, не обрезаясь?

0 голосов
/ 26 июня 2019

У меня есть счет-фактура pdf, содержащая строки таблицы, которые могут увеличиваться, я точно знаю, как добавлять страницы с помощью jsPDF, но проблема в том, что я обрезаю мое изображение, и это действительно раздражает, когда у вас есть динамический контент для печати. Как разделить изображение холста, не разрезав его? есть ли решение? PS: я не хочу, чтобы мой холст целиком помещался на одной странице PDF, потому что я могу потерять качество своего изображения, и оно становится особенно насыщенным, когда у пользователя много строк счета

Вот экран моего результата pdf:

enter image description here

TypeScript: 

public convertToPDF() {
    const data = document.getElementById('contentToConvert');
    html2canvas(data).then(canvas => {
        this.imgWidth = 200;
        this.imgHeight = (canvas.height * this.imgWidth / canvas.width);
        this.pageHeight = 295;
        this.heightLeft = this.imgHeight;
        const contentDataURL = canvas.toDataURL('image/png');
        const pdf = new jspdf('p', 'mm', 'a4', true);
        this.position = 5;
        pdf.addImage(contentDataURL, 'PNG', 5, this.position, this.imgWidth, this.imgHeight, '', 'FAST');
        this.heightLeft -= this.pageHeight;

        while (this.heightLeft >= 0) {
            this.position = this.heightLeft - this.imgHeight;
            pdf.addPage();
            pdf.addImage(contentDataURL, 'PNG', 5, this.position, this.imgWidth, this.imgHeight);
            this.heightLeft -= this.pageHeight;
        }
        pdf.save('Facture' + '-' + this.client.nomRepresentant + this.facture.dateFacturation.format('YYYYMM') + '.pdf');
    });
}

1 Ответ

0 голосов
/ 26 июня 2019

Вы можете использовать свойства css (page-break-after, page-break-before, page-break-inside) для разбиения содержимого на странице.

В вашем случае после таблиц вы можете использовать 

  .second-table-class {page-break-after: always;}

Это заставит последний элемент div на следующей странице.

Чтобы избежать разрыва страницы внутри таблицы, 

table {      
    page-break-inside: avoid;
}

Для получения дополнительной информации прочитайте this

...