Echarts 自定义 toolbox：excel 下载

[leopen-hu]

// chart to excel data
const handleChartOption = option => {
  const { data: xAxisData, name: xAxisName } = option.xAxis[0];
  const { name: yAxisName } = option.yAxis[0];
  const { data: seriesData } = option.series[0];
  const data = [];
  for (let i = 0; i < xAxisData.length; i++) {
    data.push({
      [xAxisName]: xAxisData[i],
      [yAxisName]: seriesData[i]
    });
  }

  const { text: fileName } = option.title[0];
  return [data, fileName];
};

// chart option
const option = {
  toolbox: {
    feature: {
      myExcelDownloader: createExcelDownloader(handleChartOption)
    }
  },
}

// excel downloader creator
import * as XLSX from 'xlsx';
import downloadExcelImg from 'assets/pic/downloadExcel.png';


// 使用 XLSX 创建 excel 数据
const createWorkBook = (data, SheetName = 'sheet1', bookType = 'xlsx') => {
  // make the worksheet
  const worksheet = XLSX.utils.json_to_sheet(data);

  // add to workbook
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, SheetName);

  // write workbook (use type 'binary')
  return XLSX.write(workbook, { bookType, type: 'binary' });
};

// 数据转为 unicode
const convertStringToUnicode = string => {
  const buf = new ArrayBuffer(string.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i !== string.length; i++) {
    view[i] = string.charCodeAt(i) & 0xFF; // eslint-disable-line
  }
  return buf;
};

// 文件下载
const downloadFile = (blobData, fileName, fileType = 'xlsx') => {
  const tempLink = document.createElement('a');
  tempLink.href = window.URL.createObjectURL(blobData);
  tempLink.download = `${fileName}.${fileType}`;
  tempLink.click();
  setTimeout(() => {
    window.URL.revokeObjectURL(blobData);
  }, 100);
};

const downloadExcel = (option, chartOptionHandler) => {
  const [data, fileName] = chartOptionHandler(option);
  const file = createWorkBook(data);
  const unicodeFile = convertStringToUnicode(file);
  const blobFile = new Blob([unicodeFile], { type: 'application/octet-stream' });
  downloadFile(blobFile, fileName);
};

/**
 * @callback chartOptionHandler - 处理 option，获取下载所需数据，返回[data， fileName]的格式
 * @param {object} option - chart 的 option
 * @returns {array} [data， fileName]的格式
 */

/**
 * 创建 Excel 下载 toolbox
 * @param {chartOptionHandler} callback - 处理 option 的 callback
 */
export const createExcelDownloader = callback => ({
  show: true,
  title: 'Excel下载',
  icon: `image://${downloadExcelImg}`,
  onclick: params => downloadExcel(params.option, callback)
});