首页 前端知识 echarts图表直接下载;或者转成文件流,传给后台接口

echarts图表直接下载;或者转成文件流,传给后台接口

2024-01-25 11:01:08 前端知识 前端哥 624 830 我要收藏

1、echarts图表不使用工具栏控件,直接下载
(我这里页面上有多个图表,所以使用了循环)

export() {
      for (let i = 0; i < 5; i++) {
        const canvas = document.getElementsByTagName('canvas')[i]
        let image = canvas.toDataURL({
          type: 'png',
          pixelRatio: 2,
          backgroundColor: 'white'
        })
        let a = document.createElement('a')
        a.href = image
        a.download = `echarts图表${i + 1}` //文件名
        console.log(`文件流`, a.href) //输出文件流
        a.click()
      }
    },

2、拿到echarts图表的文件流后,上传服务器供后端使用

exportBtn() {
      for (let i = 0; i < 1; i++) {
        const canvas = document.getElementsByTagName('canvas')[i]
        let image = canvas.toDataURL({
          type: 'png',
          pixelRatio: 2,
          backgroundColor: 'white'
        })
        console.log(`第${i + 1}个文件流`, image) //输出文件流,传输到后端接口的数据
        let file_ = this.base64ToFile(image, '图表名称')
        let fileData = new FormData() // new formData对象
        fileData.append('file', file_)
        //我这里直接将图片上传服务器了,根据自身需要处理
        this.axios.post('/mongodb/fileInfo/uploadFile', fileData).then((res) => {
          console.log('返回的文件信息', res)
        })
      }
    },
    // base64图片转file文件
    base64ToFile(base64, fileName) {
      // 将base64文件流按照 , 分割前缀与后续内容
      let data = base64.split(',')
      // 获取文件格式(image/png、image/jpeg、image/webp等)
      let fileType = data[0].match(/:(.*?);/)[1]
      // 获取后缀(png、jpeg、webp)
      let suffix = fileType.split('/')[1]
      // 使用atob()对base64数据进行解码 返回文件数据流
      const bstr = window.atob(data[1])
      // 获取解码后  文件数据流的长度
      let n = bstr.length
      // 根据解码后数据流的长度创建一个等长的整形数字数组
      // 但在创建时 所有元素初始值都为 0
      const u8arr = new Uint8Array(n)
      // 将整形数组的每个元素填充为解码结果字符串对应位置字符的UTF-16 编码单元
      while (n--) {
        // charCodeAt():获取给定索引处字符对应的 UTF-16 代码单元
        u8arr[n] = bstr.charCodeAt(n)
      }
      // 创建File文件对象
      // new File(bits, name, options)
      const file = new File([u8arr], `${fileName}.${suffix}`, {
        type: fileType
      })
      // 将返回File文件对象
      return file
    }
转载请注明出处或者链接地址:https://www.qianduange.cn//article/348.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!