Ant Design柱状图无法导出至Excel工作表问题求助

你当前的问题是直接将图片的base64 URL字符串放入Excel单元格，Excel只会将其识别为文本，而非解析渲染图片。需要借助SheetJS（XLSX）的图片插入API来实现正确导出。

解决方案步骤 #

• 将canvas生成的base64 URL转换为Uint8Array格式的二进制数据（SheetJS要求的图片数据格式）
• 使用XLSX.utils.sheet_add_image方法将图片插入到工作表的指定位置
• 配置图片的位置和大小参数，适配Excel单元格

修改后的完整代码 #

// 辅助函数：将base64格式的dataURL转为Uint8Array
function dataUrlToUint8Array(dataUrl) {
  const base64 = dataUrl.split(',')[1];
  const raw = atob(base64);
  const uint8Array = new Uint8Array(raw.length);
  for (let i = 0; i < raw.length; i++) {
    uint8Array[i] = raw.charCodeAt(i);
  }
  return uint8Array;
}

const exportToExcel = () => {
  const workbook = XLSX.utils.book_new();
  const chart = document.getElementById('myChart');
  
  html2canvas(chart).then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
    const imgUint8Array = dataUrlToUint8Array(imgData);
    
    // 创建包含标题的工作表
    const worksheet = XLSX.utils.aoa_to_sheet([['Chart']]);
    
    // 图片配置：控制位置、大小和类型
    const imgOptions = {
      data: imgUint8Array,
      type: 'png',
      // 图片左上角所在单元格：第1列（索引0）、第2行（索引1）
      tl: { col: 0, row: 1 },
      // 图片右下角所在单元格：控制图片大小，可根据需求调整
      br: { col: 2, row: 15 },
    };
    
    // 将图片插入工作表
    XLSX.utils.sheet_add_image(worksheet, imgOptions);
    
    XLSX.utils.book_append_sheet(workbook, worksheet, "Chart");
    XLSX.writeFile(workbook, `U_${formattedDate}.xlsx`, { compression: true });
  });
};

关键说明 #

• sheet_add_image是SheetJS提供的专门用于向工作表插入图片的方法，它会将图片数据添加到工作表的媒体资源中，而非直接写入单元格文本
• 通过tl和br参数可以调整图片在Excel中的位置和占据的单元格范围，你可以根据实际图表大小修改这两个参数的数值
• 确保你使用的SheetJS版本支持sheet_add_image方法，建议使用最新稳定版

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