Angular 14中如何将JSON转Excel且不下载文件

1. 安装依赖 #

使用xlsx库处理JSON与Excel的转换，执行安装命令：

npm install xlsx --save

2. 核心实现代码 #

在组件中编写转换函数，直接将JSON转为内存中的File对象（而非下载），再传入渲染方法：

import { Component } from '@angular/core';
import * as XLSX from 'xlsx';

@Component({
  selector: 'app-excel-demo',
  templateUrl: './excel-demo.component.html',
  styleUrls: ['./excel-demo.component.css']
})
export class ExcelDemoComponent {
  // 将JSON数据转换为内存中的Excel File对象
  jsonToExcelFile(jsonData: any[], sheetName: string = 'Sheet1'): File {
    // 从JSON生成Excel工作表
    const worksheet = XLSX.utils.json_to_sheet(jsonData);
    // 创建工作簿并添加工作表
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);

    // 生成Excel的ArrayBuffer格式数据
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    
    // 转换为Blob后封装成File对象
    const blob = new Blob([excelBuffer], { 
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
    });
    return new File([blob], 'data.xlsx', { type: blob.type });
  }

  // 示例使用流程
  processAndRenderExcel() {
    // 模拟业务JSON数据
    const mockData = [
      { id: 1, name: '张三', department: '技术部', salary: 8000 },
      { id: 2, name: '李四', department: '市场部', salary: 7500 }
    ];

    // 转换为内存中的Excel File对象
    const excelFile = this.jsonToExcelFile(mockData);

    // 将File对象传入第三方渲染方法（示例方法名，替换为你的实际渲染方法）
    this.thirdPartyRenderLibrary.render(excelFile);
  }
}

3. 关键说明 #

• 采用XLSX.write的type: 'array'参数生成ArrayBuffer，相比base64更高效，适合内存操作
• 生成的File对象可直接被多数支持文件渲染的第三方库接受；若库仅支持Blob，直接返回blob即可，无需封装为File
• 若第三方库仅支持URL形式，可通过URL.createObjectURL(blob)生成临时本地URL，但此方式仍属于内存操作范畴

4. 注意事项 #

• 处理大规模JSON数据时，需注意内存占用，避免页面卡顿
• 确认第三方渲染库的参数类型要求，按需调整返回格式（File/Blob/ArrayBuffer）

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