Kendo PDF Export работает в шаблоне нижнего колонтитула

Question

Я новичок в использовании Kendo, но на моей странице есть кнопка, которая генерирует PDF, в котором у меня все работает, но у меня есть проблема. Я хотел, чтобы HTML-код был скрыт на экране, но, очевидно, отображался в PDF, я нашел решение для этого, но теперь мой PDF-контент попадает в нижний колонтитул

CSS

.export-only {
    display: none;
}

.k-pdf-export .export-only {
    display: block;
    margin-bottom: 6cm;
}

index.html

<div id="pdfContent"></div>

<script>
    $('#pdfButton').on('click', function () {
        buttonClicked();
        // Timeout required to render off-screen HTML to generate PDF
        setTimeout(pdfBuilder, 10);
    })

    // Displays off-screen HTML content section
    function buttonClicked() {
        $('#pdfContent').show();
        $('#pdfContent').load('invoicePdf.html');
    };

    // Generates PDF using off-screen HTML content section
    function pdfBuilder() {
        kendo.drawing
            .drawDOM("#pdfContent",
                {
                    allPages: true,
                    paperSize: "A4",
                    margin: { top: "1cm", left: "1cm", right: "1cm", bottom: "4cm" },
                    scale: 0.6,

                    // Use this where you do NOT want a page break
                    keepTogether: ".prevent-split",
                    // Use this where you want page break
                    forcePageBreak: ".page-break",
                    // Use this to repeat table headers on every new page
                    repeatHeaders: true,
                    // Adds a footer to every page
                    template:
                        "<small class='pdf-footer'>" +
                            "<table class='h-100 w-100'>" +
                                "<td class='align-top'>" +
                                    "<div>" +
                                        "<b id='companyFromName'>Company Name Limited</b>" +
                                    "</div>" +
                                    "<div id='companyFromAddress'>" +
                                    "Company Address 1<br>" +
                                    "Company Address 2<br>" +
                                    "Company Address 3<br>" +
                                    "Company Address 4<br>" +
                                    "Company Postcode" +
                                    "</div>" +
                                "</td>" +
                                "<td class='align-top'>" +
                                    "<div id='companyFromRegNoRow'>" +
                                        "<div>" +
                                            "<b>Company registration no.</b>" +
                                        "</div>" +
                                        "<div id='companyFromRegNo'>0000001</div>" +
                                        "<br>" +
                                    "</div>" +
                                    "<div id='companyFromVatNoRow'>" +
                                        "<div>" +
                                            "<b>VAT no.</b>" +
                                        "</div>" +
                                        "<div id='companyFromVatNo'>0000001</div>" +
                                    "</div>" +
                                "</td>" +
                                "<td class='align-top'>" +
                                    "<div id='companyFromTelNoRow'>" +
                                        "<div>" +
                                            "<b>Telephone.</b>" +
                                        "</div>" +
                                        "<div id='companyFromTelNo'>0000001 - (Option 2)</div>" +
                                        "<br>" +
                                    "</div>" +
                                    "<div id='companyFromEmailRow'>" +
                                        "<div>" +
                                            "<b>Email</b>" +
                                        "</div>" +
                                        "<div id='companyFromEmailAdd'>0000001@0000001.co.uk</div>" +
                                    "</div>" +
                                "</td>" +
                                "<td class='text-right align-bottom'>" +
                                    "Page #: pageNum # of #: totalPages #" +
                                "</td>" +
                            "</table>" +
                        "</small>"
                })
            .then(function (group) {
                // Creates PDF name
                var invoiceNo = "00001";
                var pdfName = "Invoice - " + invoiceNo + ".pdf";
                kendo.drawing.pdf.saveAs(group, pdfName);
            });
    }
</script>

invoicePDF.html

<kendo-pdf-export #pdf margin="1cm 1cm 1cm 4cm">
    <div id="pdf-content" class="pdf-content export-only">
        <!-- Logo section -->
        <div class="row pdf-header">
            <div class="col-12">
                <h1 id="noLogo" hidden>Invoice</h1>
            </div>
        </div>
        <!-- Invoice 'To' and 'Due' sections -->
        <div class="form-group row mb-4">
            <div class="col-5 h-100">
                <div>
                    <b id='companyToName'>Company Name</b>
                </div>
                <div id='companyToAddress'>
                    Company 1st Line Address<br>
                    Company 2nd Line Address<br>
                    Company City<br>
                    Company Postcode
                </div>
            </div>
        </div>
// Lots more code here //
<kendo-pdf-export>

У меня проблема в display: block;, но мне это нужно.

Я пробовал следующие решения, но ни одно из них не работает и больше не могу придумать

• Добавление margin в файл invoicePDF.html kendo-pdf-export HTML тег
• Увеличение margin-bottom до построителя index.html
• Добавление margin-bottom в мой .k-pdf-export .export-only класс в моем CSS

Единственная другая работа, которую я нашел, которая работала, это не скрытие HTML, а его перемещение за пределы экрана, используя приведенное ниже CSS, а я просто скрываю его, поскольку не заинтересован в этом решении.

.pdf-offScreenContent {
    position: absolute;
    left: -10000px;
    margin-left: 265.5cm;
    margin-right: 1cm;
}

Кто-нибудь знает решение.

Я прочитал следующее, и хотя я не использую Angular, это просто HTML/CSS, что мне нужно

https://www.telerik.com/kendo-angular-ui/components/pdfexport/content-styling/#toc-using-the-pdf-document-element