如何从 Excel 文件中提取图片并转换为 JSON 数据-js教程-PHP中文网

如何从 Excel 文件中提取图片并转换为 JSON 数据

本文介绍使用 sheetjs 在前端解析含图片 url 的 excel 文件，将每行的图片（通过 canvas 转 base64）与名称字段组合为结构化 json 对象，适用于上传后即时处理的场景。

本文介绍使用 sheetjs 在前端解析含图片 url 的 excel 文件，将每行的图片（通过 canvas 转 base64）与名称字段组合为结构化 json 对象，适用于上传后即时处理的场景。

在 Web 前端实现 Excel 图片数据提取并序列化为 JSON，关键在于：正确读取 Excel 表格结构、识别图像列（通常为图片 URL）、异步加载并编码图像为 Base64 字符串，最后与文本字段（如 name）组装为标准 JSON 对象数组。

以下是一个完整、可集成到 React 项目中的工具函数（适配您提供的组件）：

// ✅ 推荐封装为独立工具函数（支持 Promise + 错误处理）
export async function parseExcelWithImages(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = async (e) => {
      try {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        if (jsonData.length  {
            const img = new Image();
            img.crossOrigin = 'anonymous'; // ⚠️ 若图片跨域，需服务端支持 CORS
            img.onload = () => {
              const canvas = document.createElement('canvas');
              const ctx = canvas.getContext('2d');
              canvas.width = img.width;
              canvas.height = img.height;
              ctx.drawImage(img, 0, 0);
              item.image = canvas.toDataURL('image/png'); // 推荐 PNG 保真，也可用 'image/jpeg' 控制质量
              res();
            };
            img.onerror = () => {
              console.warn(`图片加载失败：${imgSrc}`);
              item.image = null;
              res();
            };
            img.src = imgSrc;
          });

          promises.push(imgPromise);
          results.push(item);
        }

        await Promise.all(promises);
        resolve(results);
      } catch (err) {
        reject(err);
      }
    };
    reader.onerror = () => reject(new Error('文件读取失败'));
    reader.readAsArrayBuffer(file);
  });
}

? 在您的 React 组件中调用示例：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

const handleFormSubmit = async (field, e) => {
  const file = e.target.files?.[0];
  if (!file) return;

  try {
    setFormLoading(true);
    const jsonResult = await parseExcelWithImages(file);
    console.log('✅ 解析完成:', jsonResult);
    // → 此时 jsonResult 是形如 [{ image: "data:image/png;base64,...", name: "xxx" }] 的数组
    // 可直接用于后续 API 提交、状态更新等
  } catch (err) {
    console.error('❌ 解析失败:', err.message);
    alert(`解析出错：${err.message}`);
  } finally {
    setFormLoading(false);
  }
};

⚠️ 重要注意事项：

图片来源限制：Excel 中的 image 列必须是可公开访问的 HTTP/HTTPS 图片 URL（如 https://example.com/photo.jpg），不能是本地文件路径（file://）或未启用 CORS 的资源；
跨域问题：若图片来自第三方域名，请确保其响应头包含 Access-Control-Allow-Origin: *，否则 img.crossOrigin = 'anonymous' 将导致 Canvas 污染（SecurityError）；
性能优化：大量图片建议添加并发控制（如 p-limit）或分页处理，避免页面卡顿；
替代方案（更健壮）：如需支持嵌入式 Excel 图片（OLE 对象），需后端解析（如 Python openpyxl + PIL），前端无法直接提取二进制嵌入图。

✅ 最终输出 JSON 示例：

[
  {
    "image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...",
    "name": "Product A"
  },
  {
    "image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...",
    "name": "Product B"
  }
]

该方案轻量、零依赖后端，适合中小型数据集的快速原型开发与低延迟交互场景。