技术咨询：能否将Kendo UI Grid导出为Excel并添加至邮件附件？

嘿，我来帮你搞定这个问题！其实Kendo UI Grid的Excel导出流程完全可以自定义，我们可以通过监听excelExport事件拦截生成的Excel内容，再把它转换成适合作为邮件附件的格式。下面是一步步的具体操作：

步骤1：监听Grid的excelExport事件 #

首先在初始化Grid时，添加excelExport事件处理函数，同时配置导出相关的基础选项（比如是否导出所有页数据）：

$("#grid").kendoGrid({
  // 你的Grid核心配置（列定义、数据源等）
  columns: [/* 列配置 */],
  dataSource: {/* 数据源配置 */},
  
  excel: {
    fileName: "GridExport.xlsx",
    allPages: true, // 导出所有页数据，而非仅当前页
    filterable: true
  },
  excelExport: function(e) {
    // 阻止默认的自动下载行为，这样我们就能自己处理导出内容
    e.preventDefault();
    
    // 获取Kendo生成的Excel工作簿对象
    const workbook = e.workbook;
    // 接下来对这个工作簿进行转换处理
  }
});

步骤2：将Workbook转换为Blob格式 #

Kendo内置了kendo.ooxml.Workbook.toDataURL()方法，可以把Workbook转换成Data URL，我们再把这个Data URL转成Blob（二进制大对象）——这是绝大多数邮件库都支持的附件格式：

excelExport: function(e) {
  e.preventDefault();
  const workbook = e.workbook;
  
  // 将Workbook转为Data URL格式
  const dataURL = kendo.ooxml.Workbook.toDataURL(workbook);
  
  // 辅助函数：把Data URL转换成Blob
  function dataURLToBlob(dataURL) {
    const parts = dataURL.split(';base64,');
    const contentType = parts[0].split(':')[1];
    const raw = window.atob(parts[1]);
    const uInt8Array = new Uint8Array(raw.length);
    
    for (let i = 0; i < raw.length; i++) {
      uInt8Array[i] = raw.charCodeAt(i);
    }
    
    return new Blob([uInt8Array], { type: contentType });
  }
  
  // 得到最终可用的Excel Blob对象
  const excelBlob = dataURLToBlob(dataURL);
  
  // 现在就可以把这个Blob作为附件添加到邮件里了
}

步骤3：将Blob作为附件发送邮件 #

Blob格式的文件推荐通过后端服务处理邮件发送（前端mailto:协议对大文件支持很差，不推荐），下面是前后端配合的示例：

前端发送Blob到后端（用Fetch API） #

// 接上面的代码，得到excelBlob之后：
const formData = new FormData();
// 将Blob添加到FormData，指定附件文件名
formData.append('excelAttachment', excelBlob, 'GridExport.xlsx');

// 发送到后端接口
fetch('/api/send-excel-email', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(result => {
  console.log('邮件发送成功！', result);
})
.catch(error => {
  console.error('邮件发送失败:', error);
});

后端接收并发送邮件（Node.js + Nodemailer） #

先安装依赖：npm install nodemailer multer，然后编写接口：

const express = require('express');
const nodemailer = require('nodemailer');
const multer = require('multer');
const app = express();

// 配置multer接收上传的文件
const upload = multer();

// 邮件发送接口
app.post('/api/send-excel-email', upload.single('excelAttachment'), (req, res) => {
  // 配置邮件传输器（这里以Gmail为例，可替换为企业SMTP服务器）
  const transporter = nodemailer.createTransport({
    service: 'Gmail',
    auth: {
      user: 'your-email@example.com',
      pass: 'your-app-specific-password' // Gmail需用应用专用密码，普通密码无效
    }
  });

  // 邮件内容配置
  const mailOptions = {
    from: 'your-email@example.com',
    to: 'recipient@example.com',
    subject: 'Kendo Grid导出的Excel数据',
    text: '附件是Grid导出的内容，请查收。',
    attachments: [
      {
        filename: req.file.originalname,
        content: req.file.buffer // 直接使用上传的文件Buffer作为附件
      }
    ]
  };

  // 发送邮件
  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      return res.status(500).json({ success: false, message: error.message });
    }
    res.json({ success: true, message: `邮件已发送：${info.response}` });
  });
});

app.listen(3000, () => {
  console.log('服务器运行在端口3000');
});

额外提示 #

• 如果需要导出Grid当前筛选、排序后的状态数据，确保excel.filterable和excel.sortable配置正确，或者在excelExport事件里手动处理数据源。
• 后端邮件服务的配置要根据你的邮箱提供商调整，比如企业邮箱需要填写对应的SMTP服务器地址、端口和认证信息。

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