如何在Kendo jQuery Grid的PDF导出末尾新增单独页面的图片

需求说明 #

需要在Kendo jQuery Grid的PDF导出内容末尾，新增独立一页并插入指定图片。此前在page-template中直接添加img标签会导致图片显示在每一页且遮挡网格内容，不符合需求。

解决方案 #

通过监听Grid的pdfExport事件，在导出流程中手动追加新页面和图片，具体实现如下：

1. 修改Grid初始化代码，添加pdfExport事件监听 #

在Grid配置中加入pdfExport事件处理，保留原有配置的同时自定义导出逻辑：

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()
    },
    // 新增pdfExport事件监听
    pdfExport: function(e) {
        // 阻止默认导出流程，手动控制内容
        e.preventDefault();
        
        // 创建图片对象，确保加载完成后再处理
        var img = new Image();
        img.src = "/path/to/your/target-image.png"; // 替换为实际图片路径
        img.onload = function() {
            // 生成原网格内容的PDF文档
            var doc = e.sender.drawPDF({
                allPages: true
            });
            
            // 添加与原导出相同规格的新页面
            doc.addPage({
                size: "A3",
                landscape: true,
                margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" }
            });
            
            // 在新页面居中绘制图片，适配页面尺寸
            doc.image(img, doc.page.margins.left, doc.page.margins.top, {
                width: doc.page.width - doc.page.margins.left - doc.page.margins.right,
                height: doc.page.height - doc.page.margins.top - doc.page.margins.bottom,
                align: "center",
                valign: "middle"
            });
            
            // 触发最终PDF下载
            doc.save("exported-grid.pdf");
        };
    }
});

2. 保留原有页面模板 #

无需修改原有的page-template配置，保持原有内容即可：

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

关键说明 #

• 使用e.preventDefault()阻断默认导出逻辑，自定义PDF内容组合
• 必须等待图片加载完成后再绘制到PDF，避免空白或加载失败
• 新页面的纸张规格、边距与原导出保持一致，保证整体格式统一
• 通过doc.image()的参数调整图片位置和尺寸，实现页面适配

内容的提问来源于stack exchange，提问作者Sam