使用 kendo exportPDF 将表格导出为多页 PDF 文件

Question

我需要使用 kendo pdfExport 将大表导出为 pdf 文件。这段代码我到目前为止：

html:

<div style="position:relative;" id="temp-container">
    <div style="position:absolute;left:0px;top:50px;width:100%;background:url('http://127.0.0.1:8000/images/arrow1.png') no-repeat;height:50px;"></div>
    <div style="position:absolute;left:26%;top:50px;font-size:28px;">Number</div>
    <div style="position:absolute;left:50%;margin-left:-50px;width:100px;top:90px;font-size:28px;">Original</div>

    <div style="position:absolute;right:0px;width:33%;top:50px;">Date1</div>
    <div style="position:absolute;right:0px;width:33%;top:80px;">Date2</div>
    <div style="position:absolute;right:0px;width:33%;top:110px;">Date3</div>

    <div style="position:absolute;left:0px;right:0px;top:150px;background:url('http://127.0.0.1:8000/images/arrow3.png') no-repeat;height:50px;background-size:100% 100%;"></div>

    <table cellpadding="6px" cellspacing="3px" border="0px" style="width:100%;position:relative;top:200px;">
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
        <tr>
            <td style="width:80px;position:relative;text-align:center;height:30px;line-height:30px;">
                <div style="position:absolute;right:0px;top:0px;bottom:0px;width:22px;background:url('http://127.0.0.1:8000/images/background.png') repeat;">LP</div>
            </td>
            <td style="width:300px;background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">Index</td>
            <td style="background:url('http://127.0.0.1:8000/images/background.png') repeat-x;text-align:center;">TEXT</td>
        </tr>
    </table>
</div>

这是pdf导出函数调用：

setTimeout(function () {
            kendo.drawing.drawDOM($("#temp-container"))
                .then(function (group) {
                    // Render the result as a PDF file
                    return kendo.drawing.exportPDF(group, {
                        paperSize: "A4",
                        multiPage: true,
                        margin: { left: "0cm", top: "1cm", right: "0cm", bottom: "1cm" }
                    });
                })
                .done(function (data) {
                    // Save the PDF file
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "HR-Dashboard.pdf",
                        proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
                    });
                });
        }, 1000);

我的问题是生成的文件只有一页。根据文档http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#automatic-page-breaking-q1-2015，我的表不能定位为固定或绝对，不是。我需要应用自动分页，因为我不知道表格中有多少元素。在上面的示例中，其中有很多，但在其他一些情况下，只有一个或两个元素。我做错了什么？

另一个让我抓狂的问题是我无法调整纸张大小。我尝试在 exportPDF 属性中设置 A4、A5，并以英寸为单位设置主容器的宽度和高度。但是生成的文档仍然没有正确调整。我认为 paperSize A4 应该自动将主容器调整为 A4 大小？

Answer 1

我遇到了同样的问题

我意识到剑道网站上的演示是错误的

这是它的外观

       kendo.drawing.drawDOM($("#temp-container"),{

                            paperSize: "A4",
                            multiPage: true,
                            margin: { left: "0cm", top: "1cm", right: "0cm", bottom: "1cm" }
})
                    .then(function (group) {
                        // Render the result as a PDF file
                        return kendo.drawing.exportPDF(group);
                    })
                    .done(function (data) {
                        // Save the PDF file
                        kendo.saveAs({
                            dataURI: data,
                            fileName: "HR-Dashboard.pdf"
                        });
                    });

希望对你有帮助

Answer 2

选项 1： 您必须将参数 multiPage: true 添加到 exportPDF 调用。此外，请确保在您的 HTML 中，在您要创建新页面的位置包含具有类分页符的元素。例如。打开 html 跨度 class="page-break" 关闭跨度。

选项 2： 检查此网格打印http://demos.telerik.com/kendo-ui/grid/pdf-export。

Answer 3

我不知道这是否能解决您的问题，但是我注意到您的表格中有几个 DIV 的样式位置设置为绝对。也许这就是它脾气暴躁的原因？