当前位置： 首页 > news >正文

Vue 把 Echarts 图传给后端：文件流信息方式传递

news 来源：原创 2025/5/17 20:36:49

文章目录

    • 需求
    • 1. 分析1
      • 1. 构建 DOM 元素
      • 2. 事件绑定
      • 3. 获取ECharts图表的Base64编码数据并进行打包压缩
      • 4. 后端接收和处理 base64
      • 总【代码】
    • 2. 分析2
      • 1. 直接下载图片
      • 2. 拿到echarts图表的文件流后，上传服务器供后端使用
    • 3. 一键生成并导出生成的图片
      • 1. 安装库文件
      • 2. 流信息转换 + 导出图片链接
      • 3. 图片导出

需求

前端生成 Echarts 图表，传给后端，如果数量多的话需要打个包上传到接口
在这里插入图片描述
在这里插入图片描述

1. 分析1

1. 构建 DOM 元素

  1. index.vue
<div class="section1" style="height:1px;overflow: hidden" v

相关文章：

  • BFS专项练习 —— 蓝桥杯刷题
  • Java基础 3.26
  • uniapp主题切换功能，适配H5、小程序
  • PyCharm操作基础指南
  • 智能科技与美学融合，赵伟辰荣膺 2025 iF 设计大奖
  • Redis Stack 基础知识-构建现代实时数据平台
  • 从零开始学习PX4源码16(姿态控制器中的参数)
  • redis 缓存穿透
  • 关于pywebview项目打包成apk（笔记版）
  • 定制表单排序，react, sort
  • “慢SQL“治理的几点思考
  • LangChain开发（五）消息管理与聊天历史存储
  • 【前端】超链接标签（a标签）之href属性、target属性
  • ctf-web: 不统一的解析 + sql注入要求输入与输出相等 -- tpctf supersqli
  • 项目-苍穹外卖（十五) WebSocket+语音播报功能实现（来订单+催单）
  • 使用 PyCharm 创建 Python 项目时，默认生成的 .venv 文件夹是属于什么类型的虚拟环境
  • leetcode每日一题——k-avoiding 数组的最小总和
  • 主流软件工程模型全景剖析
  • 零拷贝原理面试回答
  • 【字符设备驱动开发–IMX6ULL】（二）Linux 设备号
  • 中期选举后第三势力成“莎拉弹劾案”关键，菲律宾权斗更趋复杂激烈
  • 梅花奖在上海｜舞剧《朱鹮》，剧里剧外都是生命的赞歌
  • 腾讯一季度净利增14%：AI直接拉动广告收入增长，王者荣耀流水创新高
  • 首次采用“顶置主星+侧挂从星”布局，长二丁“1箭12星”发射成功
  • 内塔尼亚胡：以军将在未来几天“全力进入”加沙
  • 上海北外滩开发建设五周年交出亮眼答卷，未来五年有何新目标？