vue 处理二进制文件流下载,封装请求

news2025/1/6 16:33:16

在这里插入图片描述
后端返回的文件流
前端需要处理成下载文件
刚开始一直报错
在这里插入图片描述
处理的方法

// http.js
import instance from './axios';

export const get = (url, params = {}, config = {}) => instance.get(url, { params, ...config });

// api.js
/**
 * 获取下载错误信息
 * @param {string} batchId - 批次ID
 * @returns {Promise} - 返回一个Promise对象,用于异步获取服务器响应
 */
export const downloadErrorMessage = (batchId, config = {}) => {
  return get(`/admin/finance/enterprise-authorization/downloadErrorMessage/${batchId}`, {}, config);
};

重点就是config配置 responseType: ‘blob’

页面代码

  downloadErrorMessage(res.data.batchId, { responseType: 'blob' }).then((response) => {
                  // 处理二进制数据并创建 Blob 对象
                  const blobObj = new Blob([response.data], {
                    'content-type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
                  });
                  saveAs(blobObj, 'error.xls'); // 这个是用的插件,不用插件可以自己创建a标签
                  handleClose();
                  emits('init');
                });

插件使用
使用 npm 安装 FileSaver.js:

npm install file-saver --save

页面引入

import { saveAs } from 'file-saver';

不用插件可以用a标签代替

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2270927.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LeetCode 热题 100_将有序数组转换为二叉搜索树(42_108_简单_C++)(二叉树;递归)

LeetCode 热题 100_将有序数组转换为二叉搜索树(42_108) 题目描述:输入输出样例:题解:解题思路:思路一(递归): 代码实现代码实现(递归)&#xff1…

Elasticsearch:利用 AutoOps 检测长时间运行的搜索查询

作者:来自 Elastic Valentin Crettaz 了解 AutoOps 如何帮助你调查困扰集群的长期搜索查询以提高搜索性能。 AutoOps 于 11 月初在 Elastic Cloud Hosted 上发布,它通过性能建议、资源利用率和成本洞察、实时问题检测和解决路径显著简化了集群管理。 Au…

Unity2022接入Google广告与支付SDK、导出工程到Android Studio使用JDK17进行打包完整流程与过程中的相关错误及处理经验总结

注:因为本人也是第一次接入广告与支付SDK相关的操作,网上也查了很多教程,很多也都是只言片语或者缺少一些关键步骤的说明,导致本人也是花了很多时间与精力踩了很多的坑才搞定,发出来也是希望能帮助到其他人在遇到相似问…

Spring实现Logback日志模板设置动态参数

版权说明: 本文由博主keep丶原创,转载请保留此块内容在文首。 原文地址: https://blog.csdn.net/qq_38688267/article/details/144842327 文章目录 背景设计日志格式实现配置动态取值logback-spring.xml 相关博客 背景 多个单体服务间存在少量…

element-ui dialog 组件源码分享

简单分享 dialog 组件源码,主要从以下三个方面: 1、dialog 页面结构。 2、dialog 组件属性。 3、dialog 组件挂载。 4、dialog 组件事件。 一、dialog 页面结构: 二、组件属性: 2.1 visible 是否显示 Dialog,支持…

Vue3 组件之插槽

文章目录 Vue3 组件之插槽概述默认插槽具名插槽默认内容插槽没有提供内容有提供内容 作用域插槽简单使用使用解构形式 Vue3 组件之插槽 概述 插槽专门用于父组件向子组件传递标签结构。在使用时,一般会在子组件中通过slot来声明占位,在父组件中&#x…

postgres docker安装

mkdir -p /root/postgresql/data docker pull postgres:14 docker run --privilegedtrue --name postgres -e POSTGRES_PASSWORD123456 -e ALLOW_IP_RANGE0.0.0.0/0 -p 5432:5432 -v /root/postgresql/data:/var/lib/postgresql/data -d postgres:14#地址:192.168.3…

探索Wiki:开源知识管理平台及其私有化部署

在如今的信息时代,企业和团队的知识管理变得愈发重要。如何有效地存储、整理、共享和协作,是提高团队效率和创新能力的关键因素之一。今天,我要为大家介绍一款非常有用的github上开源知识管理工具——Wiki,并分享它的私有化部署方…

Python多分类Logistic回归详解与实践

在机器学习中,Logistic回归是一种基本但非常有效的分类算法。它不仅可以用于二分类问题,还可以扩展应用于多分类问题。本文将详细介绍如何使用Python实现一个多分类的Logistic回归模型,并给出详细的代码示例。 一、Logistic回归简介 Logist…

打造三甲医院人工智能矩阵新引擎(三):多模态大模型篇-Med-Gemini多面手

一、引言 1.1 研究背景与意义 近年来,随着人工智能技术的迅猛发展,医疗多模态大模型如Med-Gemini应运而生,成为医疗领域的研究热点。这些模型整合了文本、影像、基因等多源数据,能够模拟人类医生的思维方式,为医疗决策提供全面、精准的支持,有望解决传统医疗模式中的诸…

Servlet解析

概念 Servlet是运行在服务端的小程序(Server Applet),可以处理客户端的请求并返回响应,主要用于构建动态的Web应用,是SpringMVC的基础。 生命周期 加载和初始化 默认在客户端第一次请求加载到容器中,通过反射实例化…

游戏如何检测iOS越狱

不同于安卓的开源生态,iOS一直秉承着安全性更高的闭源生态,系统中的硬件、软件和服务会经过严格审核和测试,来保障安全性与稳定性。 据FairGurd观察,虽然iOS系统具备一定的安全性,但并非没有漏洞,如市面上…

android studio android sdk下载地址

android studio安装后,因为公司网络原因,一直无法安装android sdk 后经过手机网络,安装android sdk成功如下,也可以手动下载后指定android sdk本地目录 https://dl.google.com/android/repository/source-35_r01.zip https://dl…

Redis面试相关

Redis开篇 使用场景 缓存 缓存穿透 解决方法一: 方法二: 通过多次hash来获取对应的值。 小结 缓存击穿 缓存雪崩 打油诗 双写一致性 两种不同的要求 强一致 读锁代码 写锁代码 强一致,性能低。 延迟一致 方案一:消息队列 方…

gitlab的搭建及使用

1、环境准备 服务器准备 CentOS Linux release 7.9.2009 (Core)&#xff0c;内存至少4G。 修改主机名和配置ip地址 hostnamectl set-hostname <hostname> 关闭主机的防火墙 # 关闭防火墙 systemctl stop firewalld #临时关闭防火墙 systemctl disable firewalld …

趣味编程:心形曲线

目录 1.序言 2.代码展示 3.代码详解 3.1 头文件包含 3.2 绘制坐标轴函数 3.3 main 函数主体部分 4. 小结 1.序言 2025年的第一篇博客就用这个笛卡尔心形图开篇吧&#xff0c;寓意着新年大家能够有心有所属&#xff0c;祝诸位程序猿 / 程序媛 能够早点遇到自己的另一半。…

跳跃表(跳表)是什么

为什么要有跳表 正常链表只能一个一个往下走但是如果我直到我的目标位置就在链表的中部但是我还得一步一步走过去很浪费时间&#xff0c;所以跳表就是在正常链表的基础上添加了多步跳跃的指针。 什么是跳表 跳表&#xff08;Skip List&#xff09;是一种概率型的数据结构&am…

如何逐步操作vCenter修改DNS服务器?

在vSphere 7中有一个新功能&#xff0c;它允许管理员更改vCenter Server Appliance的FQDN和IP。因此本文将介绍如何轻松让vCenter修改DNS服务器。 vCenter修改DNS以及修改vCenter IP地址 与在部署 vCenter Server Appliance 后&#xff0c;您可以根据需要修改其 DNS 设置和 IP…

支持图片生成、语音转文本和文本转语音节点,支持导出和导入应用,MaxKB知识库问答系统v1.9版本发布

2025年1月3日&#xff0c;MaxKB开源知识库问答系统正式发布v1.9版本。 在v1.9社区版中&#xff0c;应用方面&#xff0c;MaxKB新增图片生成节点、文本转语音节点、语音转文本节点&#xff0c;支持用户提问时上传音频文件&#xff0c;支持导出和导入应用&#xff1b;知识库方面…

WebGL 实践(一)开发环境搭建

WebGL 是一种基于 JavaScript 的 API&#xff0c;用于在浏览器中渲染 2D和3D 图形&#xff0c;很多场景都能用&#xff0c;例如游戏开发、数据可视化、在线教育和虚拟现实等应用领域。 零、基础知识 相关基础知识很重要&#xff0c;如果会html、JavaScript等技术掌握起来会更…