vue中Echart如何打包下载图片

Nike丶超哥哥

已于 2022-09-28 18:10:40 修改

阅读量3.3k

点赞数 4

文章标签： javascript vue 前端 echarts vue.js

于 2021-11-18 17:09:43 首次发布

本文链接：https://blog.csdn.net/weixin_42080056/article/details/121403376

版权

一、单Echarts下载

众所周知echarts是通过canvas画布绘制的图形，单图下载很简单只需要调用原有的API，工具类即可：

toolbox: {
            show: true,
            right:'20px',
            top:'10px',
            itemSize:'30',
            iconStyle: {
                borderColor: '#fff',//图标颜色
                borderWidth: '5',
                emphasis: {
                    color: this.info["color"],//鼠标滑过的颜色
               },
            },
        　　feature: {
        　　　　saveAsImage: {
            　　　　show:true,
                    backgroundColor: this.info["background"],//保存图片的背景色
            　　　　excludeComponents :['toolbox'],
            　　　　pixelRatio: 2
        　　　　}
        　　}
        },

那么多图应该如何处理？

二、多Echarts打包下载

首先我们要借助两个强大的依赖，jszip和file-save，通过字面理解，jszip很显然是打包用的，而file-save主要就是做文件保存的。

先说下整体思路吧，例如有3张Echarts图表，需要打包下载。首先应有个下载的button来才能触发打包下载的事件，其次获取到每张图表的base64编码，以及每张图表的名称（名称可以自己拟定）利用file-save来进行保存，最后通过jszip进行打包下载。话不多说直接上代码：

1.依次安装以上两个包

npm i jszip
npm i file-saver

2.在全局或需要的组件引用

import JSZip from 'jszip'
import FileSaver from 'file-saver'

3.接下来重点来了，因为我目前的项目是属于可视化大屏展示，涉及到百张图表的处理，所以一个Echarts对应一个组件。我在此处用到的Vue的混入，熟称mixin，因为需要获取到需要下载图表原型，也就是echarts.init('chart')，来获取每一张图表的base64编码，所以我用到了混入，小伙伴们可以自行理解，或者有更好的方法可以一起分享，直接上代码，看我的混入。

import * as echarts from "echarts";
export default {
  data() {
    return {
      myChart: null,
      zcRecordId:null
    };
  },
  mounted() {
    this.myChart = echarts.init(this.$refs[this.zcChart]);
    this.zcRecordId = this.recordId;//每张图表对应的id，小伙伴们可以自行拟定，或者Math.random()也行。
    setTimeout(()=>{
      var opts = {
        type: 'jpeg', // 配置导出的格式，还可以是png
        pixelRatio: 5,// 导出的图片分辨率，默认为 1。
        backgroundColor: '#1A43A3',// 导出的图片背景色，默认使用 option 里的 backgroundColor
      }
      var resBase64 = this.myChart.getDataURL(opts);  
      this.$store.state.allFile.push({
        title:this.zcRecordId+ ".png",//导出文件的标题
        base64:resBase64//导出文件的编码
      })
    },1000)
  },
};

上述code其实已经大白话了，有啥不懂的评论区私信我，上文为mixin文件，首先获取到当前图表的原型已经对应的名字，其次转换base64编码格式，最后push进一个提前创建好的数组里，我是在Vuex中创建了个空数组，因为我在需要下载的图表文件中引入了mixin，例如我有五张图需要下载，那么我就在这5张图表所对应的文件中引入mixin，此时我的数组里应该是有5个对象。此时你的数组打印出来应该是这样的

认真的小伙伴或许已经看到了setTimeout为什么要用setTimeout呢，其实是Eachart的渲染机制的问题，这里就不详细讲解了，如果不适用延迟，你最终下载的可能是一张没有灵魂的图片。

4.在需要下载的echar中引入mixin，这里不做过多的讲解，直接上代码

<template>
  <div class="chart-box">
    <div class="chart" :ref="zcChart"></div>
  </div>
</template>
<script>
import mixin from "@/components/mixin";
export default {
  mixins: [mixin],
}

5.给下载按钮绑定事件，创建JSZip，在zip.generateAsync函数中，执行FileSaver.saveAs（）方法

<template>
  <div>
    <div @click='upload'>下载</div>
  </div>
</template>
import JSZip from "jszip";
import FileSaver from 'file-saver';
export default {
    methods: {
        upload(){
          let zip = new JSZip();
          let fileName = "charts-file";//压缩包的文件名
          this.$store.state.allFile.forEach(item => {
              //打包的数据
              zip.file(item.title, this.dataUrlFile(item.base64,item.title))
           })
          zip.generateAsync({type: "blob"}).then(content => {
            FileSaver.saveAs(content, fileName); // file-saver方法保存文件
           })
    },
    }
}

终于好了，复制到这里，你可以拿去交工了，不用谢，不要喷，喜欢的点赞带走，不喜欢的请自觉绕道，写个需要的人，喷子勿扰！！！