Как создать PDF с jsPDF для сложных элементов? - PullRequest
Новая
       20

Как создать PDF с jsPDF для сложных элементов?

0 голосов
/ 12 января 2019

У меня есть создание PDF с jsPDF в Angular 6 админ-панели. Мы создаем изображение (холст) определенного HTML-тега и добавляем его на страницу jsPDF.

Но если страница сложная, то каково решение? В моем случае у меня есть таблица (с вертикальной прокруткой), за которой следует график. И эта таблица и график находятся в итерации (цикл) . Я должен сгенерировать весь PDF.

Можно ли каким-либо образом напечатать элемент, который не отображается (скрытая часть таблицы), и PDF все равно можно распечатать автоматически с применением соответствующего стиля. Также возникает проблема с количеством страниц, необходимых для этого сложного цикла имея таблицу и график.

Я пытался использовать jdPDF print и другие библиотеки. Я успешно распечатал страницу и понял, что делает библиотека. 

const data = document.getElementById(id);
 html2canvas(data).then(canvas => {
                const contentDataURL = canvas.toDataURL('image/png');
                const pdf = new jsPDF('p', 'mm', 'a4', true);
                const imgWidth = pdf.internal.pageSize.getWidth();
                const imgHeight = pdf.internal.pageSize.getHeight();
                const position = 0;
                pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight, '', 'FAST');
                pdf.autoPrint();
                var blob = pdf.output("blob");
                window.open(URL.createObjectURL(blob));
                // x.document.location=string
                // pdf.save('quotation.pdf');
            });
        }, 500);

Ожидание: печатать весь html со стилем, добавляя количество страниц автоматически

Фактический результат: одна страница, а также скрытый вид, например, не напечатанные свитки.

...