Angular项目中DHTMLX Spreadsheet v5.x导出XLSX至服务器的方案问询

一、拦截内置导出生成Blob上传 #

DHTMLX Spreadsheet v5.x的export.xlsx()支持通过配置回调直接获取Blob数据，无需触发自动下载：

spreadsheet.export.xlsx({
    callback: (blob) => {
        // 构造FormData准备上传
        const formData = new FormData();
        formData.append('spreadsheet', blob, 'sheet.xlsx');

        // 用Angular HttpClient上传到服务器
        this.http.post('/api/upload', formData).subscribe({
            next: res => console.log('上传成功', res),
            error: err => console.error('上传失败', err)
        });
    }
});

如果你的版本不支持callback参数，可以通过重写URL.createObjectURL拦截生成的Blob：

// 保存原生方法
const originalCreateUrl = URL.createObjectURL;

URL.createObjectURL = function(blob) {
    // 拿到Blob后执行上传
    const formData = new FormData();
    formData.append('spreadsheet', blob, 'sheet.xlsx');
    this.http.post('/api/upload', formData).subscribe(...);

    // 恢复原生方法，可选保留下载行为
    URL.createObjectURL = originalCreateUrl;
    return originalCreateUrl(blob);
};

// 调用导出
spreadsheet.export.xlsx();

二、其他提取XLSX格式的方式 #

1. 序列化数据后用第三方库生成XLSX #

通过spreadsheet.serialize()获取表格结构化数据，搭配xlsx库自行生成文件：

// 先安装依赖：npm install xlsx
import * as XLSX from 'xlsx';

// 获取表格数据
const sheetData = spreadsheet.serialize();

// 转换为Excel工作表
const worksheet = XLSX.utils.json_to_sheet(sheetData.data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

// 生成Blob
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([excelBuffer], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
});

// 上传逻辑同前
const formData = new FormData();
formData.append('spreadsheet', blob, 'sheet.xlsx');
this.http.post('/api/upload', formData).subscribe(...);

2. 使用export.raw()获取原始数据 #

部分v5.x版本支持export.raw()直接获取导出的原始二进制数据，再转为Blob：

spreadsheet.export.raw('xlsx').then(rawData => {
    const blob = new Blob([rawData], { 
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
    });
    // 上传逻辑同上
});

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