AmCharts如何导出包含JPG图表与Excel文件的ZIP压缩包

核心流程 #

整个实现分为三个独立环节，环节输出的Blob对象均可直接被ZIP打包工具识别，无需额外格式转换：

• 通过AmCharts内置导出能力获取合规的JPG格式图像Blob，规避跨域污染问题
• 将图表关联的数据源转换为xlsx格式的Blob对象
• 通过JSZip将两类Blob打包为ZIP文件触发浏览器下载

步骤1：获取可打包的图表JPG图片对象 #

禁止直接从DOM抓取canvas节点转图片——如果图表加载过外部图片资源，手动抓取canvas会触发浏览器跨域安全限制，导致生成的图片为空。用导出插件内置的capture接口已经完成了跨域合规处理，可以直接生成可用的图片Blob：

// 以AmCharts v4/v5版本为例
// 触发图表捕获，不使用默认的导出下载逻辑
chart.exporting.capture(false).then((canvasElement) => {
  // 将canvas转为指定质量的JPG格式Blob
  return new Promise((resolve) => {
    canvasElement.toBlob(
      (resultBlob) => resolve(resultBlob), 
      'image/jpeg', 
      0.9 // 图像质量，范围0-1
    );
  });
}).then((chartJpgBlob) => {
  // 输出的chartJpgBlob就是可直接用于打包的图片对象
  window.tempJpgBlob = chartJpgBlob;
});

步骤2：生成关联数据源的Excel文件Blob #

直接使用xlsx库将图表绑定的数据源转换为可打包的xlsx格式对象：

import * as XLSX from 'xlsx';
// 提取图表绑定的原始数据源
const chartDataSource = chart.data;
// 构建Excel工作表
const worksheet = XLSX.utils.json_to_sheet(chartDataSource);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "图表原始数据");
// 生成可直接打包的Excel Blob对象
const chartExcelBlob = XLSX.write(workbook, {
  bookType: 'xlsx',
  type: 'blob'
});

步骤3：打包两类文件为ZIP并导出 #

使用JSZip将两个Blob对象写入ZIP结构，最终触发浏览器下载：

import JSZip from 'jszip';
const zipInstance = new JSZip();
// 写入JPG图片文件
zipInstance.file('图表预览.jpg', window.tempJpgBlob);
// 写入Excel数据源文件
zipInstance.file('图表关联数据源.xlsx', chartExcelBlob);
// 生成ZIP格式Blob并触发下载
zipInstance.generateAsync({type: 'blob'}).then((zipBlob) => {
  const downloadLink = URL.createObjectURL(zipBlob);
  const downloadAnchor = document.createElement('a');
  downloadAnchor.href = downloadLink;
  downloadAnchor.download = '图表及数据打包导出.zip';
  downloadAnchor.click();
  // 释放临时生成的URL资源
  URL.revokeObjectURL(downloadLink);
});

注意：所有资源生成逻辑均为异步流程，必须等JPG图片Blob、Excel Blob完全生成后，再执行ZIP打包操作，否则会出现ZIP内文件损坏的问题。

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