echarts 自定义图片下载功能

mychart.getDataURL 获取当前图表的 Base64 图片 dataURL,IE8 - 不支持, imgType 图片类型, 支持 png|jpeg, 默认为 png

base64Url = myChart.getDataURL({
    pixelRatio: 2,
    backgroundColor: '#fff'
  });

base64 转码 blob

var parts = base64Url.split(';base64,');
        var contentType = parts[0].split(':')[1];
        var raw = window.atob(parts[1]);
        var rawLength = raw.length;
        var uInt8Array = new Uint8Array(rawLength);
        for (var i = 0; i <rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        // 组装参数
        var params = {
            res: uInt8Array,
            type: contentType,
            Suffix: 'jpeg',
            title:name,
        }
        downloadAPI(params)

window.atob 对用 base-64 编码过的字符串进行解码

Uint8Array 8 位无符号整数值的类型化数组. 内容将初始化为 0

charCodeAt() 方法可返回指定位置的字符的 Unicode 编码

downloadAPI 方法

/**
 * 流文件下载
 * @param {Stream} res     流文件对象, 必选
 * @param {string} type    保存的 Blob 文件格式, 必选
 * @param {string} Suffix  保存文件的后缀名, 必选
 * @param {string} title   自定义下载文件名, 必选
 * @param {string} noDate   自定义下载文件时间戳, 可选
 * for example
 * params ={
 *   res: response,
 *   type: "application/vnd.ms-excel",
 *   Suffix: 'xls',
 *   title: '员工信息',
 * }
 */
function downloadAPI(params) {
  const res = params.res,
    type = params.type,
    Suffix = params.Suffix,
    title = params.title,
    noDate = params.noDate ? params.noDate : false
  // 创建 blob
  const blob = new Blob([res], { type: type })
  // 创建时间戳
  let date = new Date().getTime()
  if (noDate) { date = '' }
  // 创建下载的链接
  const downloadElement = document.createElement('a')
  const href = window.URL.createObjectURL(blob)
  // 判断浏览器
  if (myBrowser() === 'IE' || myBrowser() === 'Edge') {
    // IE 专属下载方法
    navigator.msSaveBlob(blob, title + date + '.' + Suffix)
  } else {
    downloadElement.href = href
    // 下载后文件名
    downloadElement.download = title + date + '.' + Suffix
    document.body.appendChild(downloadElement)
    //   console.log('下载后文件名',downloadElement)
    // 点击下载
    downloadElement.click()
    //   console.log('点击下载后')
    // 下载完成移除元素
    document.body.removeChild(downloadElement)
    // 释放掉 blob 对象
    window.URL.revokeObjectURL(href)
  }
}
// 判断浏览器类型
function myBrowser() {
  var userAgent = navigator.userAgent // 取得浏览器的 userAgent 字符串
  var isOpera = userAgent.indexOf('Opera')> -1
  if (isOpera) {
    return 'Opera'
  } // 判断是否 Opera 浏览器
  if (userAgent.indexOf('Firefox')> -1) {
    return 'FF'
  } // 判断是否 Firefox 浏览器
  if (userAgent.indexOf('Chrome')> -1) {
    return 'Chrome'
  }
  if (userAgent.indexOf('Safari')> -1) {
    return 'Safari'
  } // 判断是否 Safari 浏览器
  if (userAgent.indexOf('compatible')> -1 && userAgent.indexOf('MSIE')> -1 && !isOpera) {
    return 'IE'
  } // 判断是否 IE 浏览器
  if (userAgent.indexOf('Trident')> -1) {
    return 'Edge'
  } // 判断是否 Edge 浏览器
}
// IE 浏览器图片保存本地
// function SaveAs5(imgURL)
// {
//     var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000");
//     for(; oPop.document.readyState != "complete"; )
//     {
//         if (oPop.document.readyState == "complete")break;
//     }
//     oPop.document.execCommand("SaveAs");
//     oPop.close();
// }

来源: http://www.qdfuns.com/article/13237/2f1bd29a065998c5381cf5008b5bd41d.html