首页 > 网页制作 >Excel图片提取并转换为JSON格式

Excel图片提取并转换为JSON格式

来源：互联网 2026-06-14 08:15:13

Excel资讯合集

本文介绍如何使用 JavaScript（配合 SheetJS）读取包含 image（图片 URL）和 name 列的 Excel 文件，将每行图片加载为 Base64 字符串，并与对应名称组合成 JSON 对象数组。前端处理 Excel 数据时，常遇到表格中同时包含文本字段（如名称）和图片字段的情

本文介绍如何使用 JavaScript（配合 SheetJS）读取包含 image（图片 URL）和 name 列的 Excel 文件，将每行图片加载为 Base64 字符串，并与对应名称组合成 JSON 对象数组。

前端处理 Excel 数据时，常遇到表格中同时包含文本字段（如名称）和图片字段的情况——图片字段通常是一个可访问的 HTTP/HTTPS 链接。如需将这两类数据一并导出为结构化 JSON，关键点在于：正确解析 Excel 表格、动态定位列索引、异步加载并编码图片资源。下面提供一个完整且健壮的方案，可无缝集成到 React 或纯 JavaScript 项目中使用。

核心步骤说明

使用 SheetJS（xlsx.js）解析 .xlsx 文件，转为二维数组（含表头）。
动态识别 image 和 name 列的索引位置，即使列顺序变化也能准确匹配。
遍历数据行，对每个图片 URL 创建一个实例，监听 onload 后绘制到上。
调用 canvas.toDataURL('image/jpeg') 获取 Base64 编码字符串（轻量级“伪 ByteArray”）。
组装成 { image: "data:image/jpeg;base64,...", name: "xxx" } 对象，加入结果数组。

完整可运行示例（适配 React ）

import * as XLSX from 'xlsx'; // 推荐通过 npm install xlsx 引入

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

  try {
    const arrayBuffer = await file.arrayBuffer();
    const data = new Uint8Array(arrayBuffer);
    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 < 2) {
      console.warn('Excel must contain at least header + one data row');
      return;
    }

    const headers = jsonData[0];
    const imageIndex = headers.indexOf('image');
    const nameIndex = headers.indexOf('name');
    if (imageIndex === -1 || nameIndex === -1) {
      throw new Error('Excel must have columns named "image" and "name"');
    }

    const results = [];
    const promises = [];

    // 使用 Promise.all 确保所有图片加载完成后再返回结果
    for (let i = 1; i < jsonData.length; i++) {
      const row = jsonData[i];
      const name = row[nameIndex];
      const imageUrl = row[imageIndex];
      if (!imageUrl || typeof imageUrl !== 'string') continue;

      const promise = new Promise((resolve) => {
        const img = new Image();
        img.crossOrigin = 'anonymous'; // 支持跨域图片（如 CDN）
        img.onload = () => {
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          canvas.width = img.naturalWidth;
          canvas.height = img.naturalHeight;
          ctx.drawImage(img, 0, 0);
          const base64 = canvas.toDataURL('image/jpeg', 0.9); // 可选压缩质量
          resolve({ image: base64, name });
        };
        img.onerror = () => {
          console.warn(`Failed to load image: ${imageUrl}`);
          resolve({ image: null, name }); // 或跳过该条目
        };
        img.src = imageUrl;
      });
      promises.push(promise);
    }

    const finalResults = await Promise.all(promises);
    console.log(' Parsed JSON with images:', finalResults);
    // 此处可调用 API 提交 finalResults，或 setState 更新 UI
    return finalResults;
  } catch (err) {
    console.error(' Excel parsing or image conversion failed:', err);
  }
};

注意事项与最佳实践

跨域限制：若图片列为外部域名（如 https://example.com/photo.jpg），服务器必须配置 Access-Control-Allow-Origin，或在代码中设置 img.crossOrigin = 'anonymous'；否则 canvas.toDataURL() 会抛出安全错误。
性能优化：处理大量图片时，应使用 Promise.all() 并发执行，避免同步阻塞。同时建议添加加载状态和错误降级机制（如占位图、空值处理）。
Base64 ≠ ByteArray：toDataURL() 返回的是 Base64 字符串，而非原始 Uint8Array。如需后端明确要求的二进制 ByteArray，可通过 canvas.getContext('2d').getImageData() + Uint8ClampedArray 提取像素数据，但该方法体积大、无压缩，不推荐用于传输；Base64 是更通用且兼容性好的选择。
文件类型校验：尽管 accept 属性已限制 .xlsx 格式，建议在 JavaScript 中额外检查：file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'。
React 集成提示：将上述 handleFormSubmit 绑定到即可；若用 useState 存储结果，记得在 await Promise.all(...) 完成后调用 setState。