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

(vue)前端区分接口返回两种格式,一种Blob二进制字节流,一种常规JSON,且将blob响应转为json

(vue)前端区分接口返回两种格式,一种Blob二进制字节流,一种常规JSON,且将blob响应转为json


需求:导出功能接口返回两种格式,二进制直接下载,json需弹窗提示

  • 格式1:
    在这里插入图片描述

  • 格式2:
    在这里插入图片描述

在这里插入图片描述


思路:1.先区分是哪种格式 2.将需要提示的数据转为json


实现:

// 将blob转为json(重点2)
async blobToJson(blob) {const text = await blob.text()console.log(text) // 第118行return JSON.parse(text)
},
// 导出
exportHandle() { exportVariance(this.formData).then(async(res) => {if (res.type.includes('application/json')) {(重点1const jsonData = await this.blobToJson(res) console.log(jsonData) // 第126行this.$message.warning(jsonData.message)} else {const data = resconst url = window.URL.createObjectURL(new Blob([data], { type: 'text/csv;charset=utf-8;' }))const link = document.createElement('a')link.href = urllink.setAttribute('download', 'export.csv')link.click() } }).catch((res) => {console.log(res) })
},

打印:
在这里插入图片描述


效果:
在这里插入图片描述

http://www.dtcms.com/a/272164.html

相关文章:

  • 基于Catboost算法的茶叶数据分析及价格预测系统的设计与实现
  • 多元函数的切平面与线性近似:几何直观与计算方法
  • 高数附录(1)—常用平面图形
  • 《O-PAS™标准的安全方法》白皮书:为工业自动化系统筑起安全防线
  • msf复现永恒之蓝
  • 每日一SQL 【各赛事的用户注册率】
  • Datawhale AI 夏令营:基于带货视频评论的用户洞察挑战赛 Notebook(下篇)
  • 流媒体服务
  • SIMATIC S7-1200的以太网通信能力:协议与资源详细解析
  • x86架构CPU市场格局
  • WIFI协议全解析05:WiFi的安全机制:IoT设备如何实现安全连接?
  • PHP安全编程实践系列(三):安全会话管理与防护策略
  • 【运维】串口、网络一些基本信息
  • 【超详细】CentOS系统Docker安装与配置一键脚本(附镜像加速配置)
  • Pinia 笔记:Vue3 状态管理库
  • 双模秒切,体验跃迁!飞利浦EVNIA双模游戏显示器27M2N6801M王者降临!
  • UnrealEngine5游戏引擎实践(C++)
  • 如何将多个.sql文件合并成一个:Windows和Linux/Mac详细指南
  • 字节 Seed 团队联合清华大学智能产业研究院开源 MemAgent: 基于多轮对话强化学习记忆代理的长文本大语言模型重构
  • 为了安全应该使用非root用户启动nginx
  • 相机:以鼠标点为中心缩放(使用OpenGL+QT开发三维CAD)
  • [Xmos] Xmos架构
  • 从面向对象编程语言PHP转到Go时的一些疑惑?
  • 同时部署两个不同版本的tomcat要如何配置环境变量
  • Xavier上安装RTSP服务端教程
  • 电商 AI 客服中的 NLP 技术:如何实现更自然的人机对话交互?
  • linux-MySQL的安装
  • 从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
  • SQLite3 中列(变量)的特殊属性
  • Linux下LCD驱动-IMX6ULL