Js之echarts图片下载

1、使用canvas的toDataURL方法

const canvas = document.getElementsByTagName('canvas');
const dom = Array.from(canvas)[6];
const baseUrl = dom.toDataURL('image/png'); // 获取base64
const link = document.createElement('a');
link.href = baseUrl;
link.setAttribute('download', 'fileName.png');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

2、

exportImg('area-line', `xxx统计图`);

/*
 * @Description: 外部点击触发echarts的保存图片
 */

import echarts from 'echarts';

export const convertBase64UrlToBlob = (base64) => {
  const parts = base64.dataURL.split(';base64,');
  const contentType = parts[0].split(':')[1];
  const raw = window.atob(parts[1]);
  const rawLength = raw.length;
  const uInt8Array = new Uint8Array(rawLength);
  for (let i = 0; i < rawLength; i++) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], { type: contentType });
};

export const exportImg = (id, name) => {
  const myChart = echarts.getInstanceByDom(
    document.getElementById(id)
  ); // 获取当前的echarts实例
  const url = myChart.getConnectedDataURL({
    pixelRatio: 1,
    backgroundColor: '#fff', // 图表背景色
    excludeComponents: [
      'toolbox', // 保存图表时忽略的工具组件,默认忽略工具栏
    ],
    type: 'png', // 图片类型支持png和jpeg
  });
  const a = document.createElement('a');
  a.download = `${name}.png`;
  a.target = '_blank';
  a.href = url;
  if (typeof MouseEvent === 'function') {
    // Chrome and Firefox
    const evt = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: false,
    });
    a.dispatchEvent(evt);
  } else {
    // IE
    const base64 = {
      dataURL: url,
      type: 'png',
      ext: 'png',
    };
    const blob = convertBase64UrlToBlob(base64);
    // 下载
    window.navigator.msSaveBlob(
      blob,
      `${name}.png`
    );
  }
};

export const generateBlob = (id) => {
  const myChart = echarts.getInstanceByDom(
    document.getElementById(id)
  );
  let result;
  if (myChart) {
    const url = myChart.getConnectedDataURL({
      pixelRatio: 1,
      backgroundColor: '#fff',
      excludeComponents: [
        'toolbox',
      ],
      type: 'png',
    });
    const base64 = {
      dataURL: url,
      type: 'png',
      ext: 'png',
    };
    result = convertBase64UrlToBlob(base64);
  } else {
    result = null;
  }

  return result;
};