Kendo JQuery Grid 将图像附加到 PDF 导出

Question

我想在 PDF 导出的末尾附加图像。图像应放置在新页面上导出的网格之后。

下面是我的代码，用于初始化剑道网格以及 PDF 导出。

    var riskScoresGrid = $("#riskDataTable").kendoGrid({
    dataSource: {
        transport: {
            read: {
                url: "/api/Organisation/GetResidualScoresPDF",
                type: "get",
                data: model,
            }
        },
        pageSize: 20,
        schema: {
            data: function (response) {
                return response;
            },
            total: function (response) {
                return response.length;
            }
        }
    },
    columns: [
        {
            field: "SubDivision",
            title: "COB / PRU",
            width: "120px",
            attributes: { style: "text-align: center;" },
            headerAttributes: { style: "text-align: center;" }
        },
        {
            field: "Category",
            title: "Category",
            width: "120px",
            attributes: { style: "text-align: center;" },
            headerAttributes: { style: "text-align: center;" }
        },
        {
            field: "SubCategory",
            title: "Sub Category",
            template: "#= SubCategory || '-' #",
            width: "120px",
            attributes: { style: "text-align: center;" },
            headerAttributes: { style: "text-align: center;" }
        },
        {
            field: "Impact",
            title: "Impact",
            width: "100px",
            attributes: { style: "text-align: center;" },
            headerAttributes: { style: "text-align: center;" }
        },
        {
            field: "Likelihood",
            title: "Likelihood",
            width: "100px",
            attributes: { style: "text-align: center;" },
            headerAttributes: { style: "text-align: center;" }
        },
        {
            field: "Score",
            title: "Score",
            width: "60px",
            attributes: { style: "text-align: center;" },
            headerAttributes: { style: "text-align: center;" }
        },
        {
            field: "Comments",
            title: "Comments",
            headerAttributes: { style: "text-align: center;" },
            template: function (dataItem) {
                return decodeHtmlEntities(dataItem.Comments);
            }
        }
    ],
    pageable: true,
    toolbar: ["pdf"],
    pdf: {
        fileName: "exported-grid.pdf",
        allPages: true,
        avoidLinks: true,
        paperSize: "A3",
        margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
        landscape: true,
        title: "Risk Assessment: " + entity,
        template: $("#page-template").html()
    }
});

另外，下面是页面模板的html代码：

<script type="x/kendo-template" id="page-template">
      <div class="page-template">
        <div class="header">
    <em>#=getKendoHeader()#</em>
        </div>
    </div>
</script>

我尝试向页面模板 div 添加一个 img 标签，但这会在每个页面上添加图像，并且它位于网格前面，因此网格不可见。

Answer 1

您可以尝试使用模板语法并仅在最后一页渲染图像

    <script type="x/kendo-template" id="page-template">
    <div class="page-template">
        <div class="header">
            <div style="float: right">Page #:pageNum# of #:totalPages#</div>
            This is a header.
        </div>
        <div class="footer">
            This is a footer.
            Page #:pageNum# of #:totalPages#
        </div>
        # if(pageNum == totalPages){#
        <img src="https://picsum.photos/id/237/500/300" />
        #}#
    </div>
    </script>

这是仅在报告末尾添加的图像 - 示例。