HTML2CANVAS неправильно отображает CSS на большой HTML-странице - PullRequest
Новая
       76

HTML2CANVAS неправильно отображает CSS на большой HTML-странице

0 голосов
/ 25 апреля 2019

Привет У меня возникла проблема с html2canvas при создании PDF.Я использую эту библиотеку для создания файла pdf https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js

. Я исследовал проблему, и многие люди ответили: «Проверьте, что создаваемое полотно находится в пределах ограничений для браузера», а затем направьте вас по этой ссылке.http://html2canvas.hertzen.com/faq/

Я использую Firefox для создания PDF, и это то, что консоль возвращает при печати PDF 965ms html2canvas: Canvas renderer initialized (1391x19143 at 264.566650390625,5630) with scale 1

Ссылка, которой я поделился, упоминала, что Fiefox имеетпредел Maximum height/width: 32,767 pixels, который мой PDF еще не достиг, но по какой-то причине PDF не отображает некоторые стили.

Вот код, который я использовал для печати PDF: 

var opt = {
    margin:       [70, 26],
    filename:     'pdf_summary.pdf',
    image:        { type: 'jpeg', quality: 1 },
    html2canvas:  { scale: 1 },
    jsPDF:        { unit: 'mm', format: ['420', '594'], orientation: 'p' }
};

html2pdf().from(content).set(opt).toPdf().get('pdf').then(function (pdfObject) {
    console.log(pdfObject);
    totalPages = pdfObject.internal.getNumberOfPages();
    for (var i = 1; i <= totalPages; i++) {
        pdfObject.setPage(i);
        pdfObject.setFontSize(15);
        pdfObject.setTextColor(150);
        pdfObject.text('Page ' + i + ' of ' + totalPages, 40, pdfObject.internal.pageSize.getHeight() - 20);
        pdfObject.text('Report generated on ' + moment().format("DD-MM-YYYY"), pdfObject.internal.pageSize.getWidth() - 117, pdfObject.internal.pageSize.getHeight() - 20);

        pdfObject.setFontSize(50);
        pdfObject.setTextColor('#ff5818');
        pdfObject.text('Intelli-Sense Analytics', pdfObject.internal.pageSize.getWidth() - 211, 50);

        pdfObject.setFontSize(20);
        pdfObject.setTextColor('#ff5818');
        pdfObject.text('Powered by GEO-Sense', pdfObject.internal.pageSize.getWidth() - 117, 60);
    }
}).save();

content содержит HTML-код, который я печатаю.

Я печатаю 12 страниц контента в PDF и хотел бы сделать гораздо больше, если это возможно.Первые 10 страниц загружаются отлично, но на страницах 11 и 12 CSS, кажется, загружается неправильно.

Примеры

Изображение заголовка таблицы перед страницей 10где CSS работает отлично.

working

Изображение заголовка таблицы после страницы 10, где CSS не работает вообще, но текст отображается отлично?

not working

На рисунке выше видно, что все загружается совершенно иначе, чем заголовок таблицы (обведен кружком), по какой-то причине он просто пустой со слабыми контурами.Просто, чтобы подтвердить, что пустое поле тоже хорошо, там не должно быть ничего.

Я не уверен, что это проблема CSS, так как текст использует некоторые из CSS, которые я установил.Я проверил это с другими элементами моего PDF, я скопировал графики, которые используются до страницы 10, и разместил их после страницы 10, и они тоже не загружаются.

...