Kendo Grid自定义Export to PDF按钮：如何返回PDF至视图展示

我之前做Kendo Grid导出PDF的时候也碰到过一模一样的需求，已经能生成PDF但不知道怎么返回给前端触发预览/保存，这里给你分前后端配合的两种可行方案，亲测有效：

一、后端关键配置：正确设置响应头 #

不管你用什么后端语言，核心是要让接口返回PDF字节流，同时设置正确的HTTP响应头，告诉浏览器怎么处理这个文件：

核心响应头说明 #

• Content-Type: application/pdf：明确告诉浏览器这是PDF文件
• Content-Disposition：控制文件的展示方式
  • 设为 inline; filename="GridExport.pdf"：浏览器会尝试在新标签页直接打开PDF
  • 设为 attachment; filename="GridExport.pdf"：浏览器会弹出“打开/保存”对话框

举个ASP.NET Core的后端示例 #

[HttpPost]
public IActionResult ExportGridToPdf([FromBody] GridExportParams model)
{
    // 1. 你的业务逻辑：根据Grid参数生成PDF字节流
    byte[] pdfBytes = YourPdfGenerationService.Generate(model);

    // 2. 设置响应头（这里选inline，要弹出对话框就改成attachment）
    var contentDisposition = new ContentDispositionHeaderValue("inline")
    {
        FileName = $"Grid_{DateTime.Now:yyyyMMdd}.pdf"
    };
    Response.Headers.Add(HeaderNames.ContentDisposition, contentDisposition.ToString());

    // 3. 返回PDF字节流
    return File(pdfBytes, "application/pdf");
}

二、前端Kendo Grid按钮的两种实现方式 #

方式1：表单提交到新窗口（最可靠，避免弹窗拦截） #

如果你的导出需要传递较多参数（比如Grid的筛选、分页状态），用隐藏表单提交到新窗口是最稳妥的，不会被浏览器的弹窗拦截：

// 绑定自定义导出按钮的点击事件
$("#customExportPdfBtn").on("click", function() {
    // 1. 获取当前Grid的状态（筛选、分页、排序等）
    var grid = $("#yourGrid").data("kendoGrid");
    var dataSource = grid.dataSource;
    var exportParams = {
        page: dataSource.page(),
        pageSize: dataSource.pageSize(),
        filters: dataSource.filter(),
        sorts: dataSource.sort()
    };

    // 2. 创建隐藏表单
    var exportForm = $("<form>")
        .attr("method", "POST")
        .attr("action", "/api/Grid/ExportToPdf")
        .attr("target", "_blank") // 关键：在新窗口打开
        .css("display", "none");

    // 3. 添加参数到表单
    $("<input>")
        .attr("type", "hidden")
        .attr("name", "exportParams")
        .val(JSON.stringify(exportParams))
        .appendTo(exportForm);

    // 4. 提交表单并移除
    exportForm.appendTo("body").submit().remove();
});

方式2：Fetch获取Blob后打开新标签页 #

如果喜欢用异步请求的方式，可以通过Fetch获取PDF的Blob对象，再创建临时URL打开：

$("#customExportPdfBtn").on("click", function() {
    var grid = $("#yourGrid").data("kendoGrid");
    var exportParams = {
        // 收集Grid的必要参数
    };

    fetch("/api/Grid/ExportToPdf", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-Token": $("input[name='__RequestVerificationToken']").val() // 记得加CSRF令牌（如果后端启用的话）
        },
        body: JSON.stringify(exportParams)
    })
    .then(response => {
        if (!response.ok) throw new Error("导出请求失败");
        return response.blob();
    })
    .then(pdfBlob => {
        // 创建临时Blob URL
        const pdfUrl = URL.createObjectURL(pdfBlob);
        // 在新标签页打开
        window.open(pdfUrl, "_blank");
        // 100ms后释放临时URL（避免内存泄漏）
        setTimeout(() => URL.revokeObjectURL(pdfUrl), 100);
    })
    .catch(err => {
        console.error("PDF导出错误:", err);
        alert("导出失败，请稍后重试");
    });
});

几个重要注意点 #

• 避免弹窗拦截：尽量在用户直接点击按钮的事件里触发，不要在异步回调的深层逻辑里调用window.open，否则容易被浏览器拦截（表单提交的方式几乎不会被拦截）
• Grid状态同步：一定要把当前Grid的分页、筛选、排序参数传给后端，确保生成的PDF和用户当前看到的数据一致
• 浏览器兼容性：不同浏览器对Content-Disposition的处理略有差异，比如某些浏览器会强制下载inline的PDF，这是浏览器自身的设置，无法完全控制

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