Angular4如何导出对象数组至Excel并添加公司Logo？

嘿，这个需求在业务场景里挺常见的！我推荐用ExcelJS这个库来实现——它既能轻松把你的对象数组转成Excel表格，还支持插入图片（比如公司Logo），用法也很灵活。下面分场景给你具体的实现步骤：

一、先安装依赖 #

不管是浏览器端还是Node.js环境，先安装ExcelJS：

npm install exceljs
# 或者用yarn
yarn add exceljs

二、浏览器端实现（前端页面导出） #

如果是在网页里让用户点击按钮下载Excel，可以用下面的代码：

import ExcelJS from 'exceljs';

async function exportEmployeeExcel(employeeData, logoBase64) {
  // 1. 创建工作簿和工作表
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('员工信息');

  // 2. 设置表头（从对象数组里自动提取键作为表头）
  const headers = Object.keys(employeeData[0]);
  worksheet.addRow(headers);

  // 3. 填充数据行
  employeeData.forEach(employee => {
    // 按表头顺序提取每个员工的对应值
    const rowData = headers.map(header => employee[header]);
    worksheet.addRow(rowData);
  });

  // 4. 插入公司Logo（需要先把Logo转成Base64格式）
  if (logoBase64) {
    const logoImage = workbook.addImage({
      base64: logoBase64,
      extension: 'png', // 根据你的Logo格式调整，比如jpg、jpeg
    });
    // 把Logo放在工作表的右上角（比如第7列第1行，col/row从0开始计数）
    worksheet.addImage(logoImage, {
      tl: { col: 6, row: 0 }, // 左上角位置
      ext: { width: 120, height: 60 }, // 图片显示尺寸
    });
  }

  // 5. 生成文件并触发下载
  const excelBuffer = await workbook.xlsx.writeBuffer();
  const blob = new Blob([excelBuffer], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
  });
  const downloadUrl = URL.createObjectURL(blob);
  
  const aTag = document.createElement('a');
  aTag.href = downloadUrl;
  aTag.download = '员工信息表.xlsx';
  aTag.click();
  
  // 清理临时URL
  URL.revokeObjectURL(downloadUrl);
}

// 你的原始数据
const employeeData = [
  { "FirstName": "John", "LastName": "Parker", "Age": "23", "Cat": "23g", "SOP": "Active" },
  { "FirstName": "Rose", "LastName": "Jackson", "Age": "44", "Cat": "44g", "SOP": "InActive" }
];

// 如何获取Logo的Base64？可以通过FileReader读取用户上传的Logo，或者从后端接口获取
// 比如用户选择本地Logo文件后：
// document.getElementById('logo-input').addEventListener('change', async (e) => {
//   const file = e.target.files[0];
//   const reader = new FileReader();
//   reader.onload = () => {
//     const base64 = reader.result.split(',')[1]; // 去掉data:image/png;base64,前缀
//     exportEmployeeExcel(employeeData, base64);
//   };
//   reader.readAsDataURL(file);
// });

三、Node.js端实现（后端生成文件） #

如果是在服务器端生成Excel文件再提供下载，可以用这个版本：

const ExcelJS = require('exceljs');
const fs = require('fs').promises;

async function generateEmployeeExcel(employeeData, logoFilePath) {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('员工信息');

  // 设置表头
  const headers = Object.keys(employeeData[0]);
  worksheet.addRow(headers);

  // 填充数据
  employeeData.forEach(employee => {
    const rowData = headers.map(header => employee[header]);
    worksheet.addRow(rowData);
  });

  // 插入本地Logo文件
  if (logoFilePath) {
    const logoBuffer = await fs.readFile(logoFilePath);
    const logoImage = workbook.addImage({
      buffer: logoBuffer,
      extension: 'png',
    });
    worksheet.addImage(logoImage, {
      tl: { col: 6, row: 0 },
      ext: { width: 120, height: 60 },
    });
  }

  // 写入本地文件
  await workbook.xlsx.writeFile('./员工信息表.xlsx');
  console.log('Excel文件已成功生成！');
}

// 调用函数（传入你的数据和Logo路径）
// generateEmployeeExcel(employeeData, './company-logo.png');

四、注意事项 #

• 图片格式：ExcelJS支持PNG、JPEG、GIF等常见格式，注意extension参数要和你的Logo格式匹配
• 位置调整：tl属性的col和row可以自由调整，避免Logo覆盖表头或数据内容
• 备选方案：如果不想用ExcelJS，也可以用SheetJS(xlsx) 配合xlsx-populate插件实现，但ExcelJS的图片插入功能更直接，不需要额外依赖

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