frame/parts/statistics/to-download.vue

<template>
  <div id="to-download">
    <el-row type="flex" align="middle" justify="center" style="margin-bottom:20px">
      <el-col :span="2">
        <el-button size="mini" type="primary" plain icon="el-icon-download" @click="downLoad"></el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'to-download',
  props: {
    canvas: { type: null },
    gid: { type: String, default: `${new Date().getTime()}` },
  },
  components: {},
  data: function() {
    return {};
  },
  created() {},
  methods: {
    downLoad() {
      let e = this.canvas;
      let img = e.toDataURL('image/png', 1);
      let a = document.createElement('a');
      a.href = img;
      a.download = this.gid;
      a.click();
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>