从Google Sheet同步图片与数据至Wix的问题求助

一、从Google Sheet同步图片到Wix时图片列为空的解决方法 #

问题根源 #

@velo/google-sheets-integration-backend的getValues方法仅读取单元格的文本/数值内容，而Google Sheet中插入到单元格的图片属于单元格附加对象，不在默认读取范围内，因此返回空值。

解决方案：直接调用Google Sheets API获取图片数据 #

放弃使用Velo的集成工具，改用Google Sheets原生API的spreadsheets.get接口，通过指定includeGridData=true参数获取单元格的图片元数据。

步骤1：准备前置条件

• 启用Google Sheets API，并创建服务账号密钥（将密钥存到Wix Secrets中，字段名如googleServiceAccountKey）。
• 在Wix后台的Package Manager中安装googleapis包。

步骤2：实现获取带图片的Sheet数据代码

import { getSecret } from 'wix-secrets-backend';
import { google } from 'googleapis';

export const getSheetWithImages = async (range) => {
    const serviceAccountKey = JSON.parse(await getSecret("googleServiceAccountKey"));
    const sheetId = await getSecret("sheetId");
    const [sheetName, rangePart] = range.split("!");

    // 初始化认证
    const auth = new google.auth.JWT(
        serviceAccountKey.client_email,
        null,
        serviceAccountKey.private_key,
        ["https://www.googleapis.com/auth/spreadsheets.readonly"]
    );
    const sheets = google.sheets({ version: "v4", auth });

    // 请求包含图片数据的Sheet内容
    const response = await sheets.spreadsheets.get({
        spreadsheetId: sheetId,
        ranges: [range],
        includeGridData: true
    });

    // 解析每行数据，提取图片URL或普通单元格值
    const rows = response.data.sheets[0].data[0].rowData.map(row => {
        return row.values?.map(cell => {
            // 判断单元格是否包含图片
            if (cell.effectiveValue?.imageValue) {
                // 链接图片直接返回URL，内嵌图片返回Drive文件ID（需额外调用Drive API获取内容）
                return cell.effectiveValue.imageValue.contentUrl || cell.effectiveValue.imageValue.imageId;
            }
            // 普通单元格返回对应值
            return cell.effectiveValue?.stringValue || cell.effectiveValue?.numberValue || "";
        }) || [];
    });

    return rows;
};

补充说明

如果是内嵌到单元格的图片（而非通过URL插入的图片），需要额外调用Google Drive API，通过imageId获取图片的实际访问链接。

二、Wix发送图片到Google Sheet时变为Base64 URL的解决方法 #

问题根源 #

直接将Base64字符串写入Google Sheet单元格，Sheet会将其识别为普通文本，而非图片对象。

解决方案：先上传图片到Google Drive，再插入到Sheet单元格 #

步骤1：将Base64图片上传到Google Drive

import { getSecret } from 'wix-secrets-backend';
import { google } from 'googleapis';
import { Buffer } from 'buffer';

export const uploadBase64ToDrive = async (base64Data, fileName) => {
    const serviceAccountKey = JSON.parse(await getSecret("googleServiceAccountKey"));
    const auth = new google.auth.JWT(
        serviceAccountKey.client_email,
        null,
        serviceAccountKey.private_key,
        ["https://www.googleapis.com/auth/drive.file"]
    );
    const drive = google.drive({ version: "v3", auth });

    // 解码Base64数据
    const base64Payload = base64Data.split(",")[1];
    const buffer = Buffer.from(base64Payload, "base64");
    const mimeType = base64Data.split(";")[0].split(":")[1];

    // 上传到Drive
    const file = await drive.files.create({
        resource: { name: fileName, mimeType },
        media: { mimeType, body: buffer },
        fields: "id,webContentLink"
    });

    // 设置文件为可公开访问（确保Sheet能读取）
    await drive.permissions.create({
        fileId: file.data.id,
        requestBody: { role: "reader", type: "anyone" }
    });

    return file.data.webContentLink;
};

步骤2：将Drive图片插入到Google Sheet指定单元格

import { getSecret } from 'wix-secrets-backend';
import { google } from 'googleapis';

export const insertImageToSheet = async (sheetId, sheetIndex, row, col, imageUrl) => {
    const serviceAccountKey = JSON.parse(await getSecret("googleServiceAccountKey"));
    const auth = new google.auth.JWT(
        serviceAccountKey.client_email,
        null,
        serviceAccountKey.private_key,
        ["https://www.googleapis.com/auth/spreadsheets"]
    );
    const sheets = google.sheets({ version: "v4", auth });

    // 构建插入图片的请求
    const requests = [{
        updateCells: {
            rows: {
                values: [{
                    userEnteredValue: {
                        imageValue: { contentUrl: imageUrl }
                    }
                }]
            },
            range: {
                sheetId: sheetIndex, // 注意是Sheet的索引ID（不是Spreadsheet ID）
                startRowIndex: row,
                endRowIndex: row + 1,
                startColumnIndex: col,
                endColumnIndex: col + 1
            },
            fields: "userEnteredValue"
        }
    }];

    await sheets.spreadsheets.batchUpdate({
        spreadsheetId: sheetId,
        resource: { requests }
    });
};

使用示例

// 处理签名图片上传并插入Sheet
export const syncSignatureToSheet = async (base64Signature, row, col) => {
    const sheetId = await getSecret("sheetId");
    const imageUrl = await uploadBase64ToDrive(base64Signature, `signature-${Date.now()}.png`);
    await insertImageToSheet(sheetId, 0, row, col, imageUrl);
};

内容的提问来源于stack exchange，提问作者Padua Edward Joseph