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，我的表不能定位为固定或绝对，而不是。我需要应用autopaging因为我不知道表中有多少元素。在上面的例子中有很多，但在其他一些情况下只有一两个元素。我做错了什么？

另一个让我发疯的问题是我无法调整纸张大小。我试图在exportPDF属性中设置A4，A5并设置主容器的宽度和高度（以英寸为单位）。但是生成的文档仍未正确调整。我认为纸张尺寸A4应该自动将主容器调整到A4尺寸？

Answer 1

我有同样的问题

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

这是它应该如何看待

       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

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

Answer 3

选项1：您必须将参数multiPage：true添加到exportPDF调用。此外，请确保在HTML中包含要在其中创建新页面的地方使用类分页符的元素。例如。打开html span class =＆＃34; page-break＆＃34;近距离。

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

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

3 个答案: