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>

发票PDF.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

Kendo PDF导出进入页脚模板

0 个答案: