如何在React中正确解析来自Google Apps Script的图表数据？

后端处理代码 #

const charts = analytics.getCharts();
const chartBlobs = [];
charts.forEach(function (chart, i) {
  chartBlobs[i] = chart.getAs('image/png').getDataAsString();
});
return chartBlobs;

前端处理代码 #

数据接收与状态设置 #

const [charts, setCharts] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
  google.script.run.withSuccessHandler(setSheetCharts).getChartsFromSheet();
}, []);

const setSheetCharts = (vn) => {
  setCharts(getBase64ImageSrc(vn));
  setLoading(false);
}

Base64转换函数 #

function getBase64ImageSrc(pngblobs) {
  return pngblobs.map((pngstring) => {
    const base64ImageString = Buffer.from(pngstring, 'binary').toString('base64');
    return `data:image/png;base64,${base64ImageString}`;
  });
}

渲染代码 #

<div>
  {charts.map((chart, index) => (
    <img key={index} src={chart} alt={`chart-${index}`} />
  ))}
</div>

问题现象 #

客户端接收到的字符串包含PNG文件头但存在乱码（如�PNG\r\n\u001a\n...），转换后的Base64 URI格式看似正常，但图片无法加载显示。

问题原因 #

Google Apps Script中Blob.getDataAsString()默认使用UTF-8编码处理二进制数据，而PNG是二进制文件，其中部分字节无法被UTF-8正确编码，会被替换为�之类的无效字符，导致原始二进制数据损坏。前端即使尝试用binary编码解析，也无法恢复被破坏的字节，最终生成的Base64字符串无法还原为有效的PNG图片。

解决方案 #

直接在后端将PNG二进制数据转换为Base64字符串，避免UTF-8编码导致的数据损坏：

修改后端代码 #

const charts = analytics.getCharts();
const chartBlobs = [];
charts.forEach(function (chart, i) {
  const pngBlob = chart.getAs('image/png');
  // 获取原始字节数组并直接转Base64
  chartBlobs[i] = Utilities.base64Encode(pngBlob.getBytes());
});
return chartBlobs;

简化前端转换函数 #

function getBase64ImageSrc(pngBase64s) {
  // 直接拼接data URI，无需额外转换
  return pngBase64s.map(base64 => `data:image/png;base64,${base64}`);
}

这样前端接收到的是完整的Base64字符串，拼接成标准的data URI后即可正常渲染图片。

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