从后端获取文件数据并导出

导出文件的公共方法

export const download = (res, tools) => {const { message, hide } = tools;const fileReader: any = new FileReader();console.log('fileReader-res>>>', res);fileReader.onload = (e) => {if (res?.data?.type === 'application/json') {try {const jsonData = JSON.parse(fileReader.result);if (jsonData?.success === false && jsonData?.message) {hide?.();message.error(jsonData?.message);}} catch (error) {hide?.();message.error(getLocalTextFun('common.export.error'));}} else {try {const filename = (res.response.headers.get('content-disposition').split('filename=')?.[1] || '').replace(/"/g, '');if ('msSaveOrOpenBlob' in navigator) {window.navigator.msSaveOrOpenBlob(res.data, decodeURI(filename));} else {const blob = new Blob([res.data]);const url = window.URL.createObjectURL(blob);const link: any = document.createElement('a');link.href = url;link.download = decodeURI(filename);link.click();hide?.();window.URL.revokeObjectURL(url);}} catch (err: any) {hide?.();message.error(getLocalTextFun('common.export.error'));}}};try {fileReader.readAsText(res.data);} catch (e) {hide?.();message.error(getLocalTextFun('common.export.error'));}
};

请求后端接口

const hide = message.loading(`加载中...`, 0);
const res = await exportI18nByLocal(record.locale);
download(res, {message, hide});

接口请求

export async function executeAndTryCatch(func: any) {try {return await func();} catch (error: any) {return error;}
}
export function exportI18nByLocal(locale:string) {return executeAndTryCatch(() =>request<Record<string, any>>(`${api().i18nExport}?locale=${locale}`, {method: 'GET',responseType: 'blob',//'Accept': 'application/vnd.ms-excel', 导出文件是excelheaders: {'Accept': 'application/vnd.ms-excel',"locale": locale},//  获取返回数据结构里面包含response数据 如下图getResponse: true,}).then((res: any) => judgeErrorByResponseType(res)),);
}

接口返回结果
在这里插入图片描述

判断文件是否导出失败

function judgeErrorByResponseType(response: any) {const res = response.response;return new Promise((resolve, reject) => {if (!res) resolve('');if (res.headers.get('Content-Type').includes('json')) {const reader = new FileReader();reader.onload = () => {const { result }: any = reader;const errorInfos = JSON.parse(result);resolve(errorInfos);};reader.onerror = (err) => {reject(err);};reader.readAsText(response.data);} else {resolve(response);}});
}

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数字孪生与智慧城市:重塑城市生活的新模式

随着信息技术的迅猛发展&#xff0c;数字孪生作为一种新兴的技术理念&#xff0c;正在逐渐改变城市建设和管理的传统模式。智慧城市作为数字孪生技术应用的重要领域&#xff0c;正在以其独特的优势和潜力&#xff0c;重塑着城市生活的方方面面。本文将从数字孪生的概念、智慧城…

Java-SSM电影购票系统

Java-SSM电影购票系统 1.服务承诺&#xff1a; 包安装运行&#xff0c;如有需要欢迎联系&#xff08;VX:yuanchengruanjian&#xff09;。 2.项目所用框架: 前端:JSP、layui、bootstrap等。 后端:SSM,即Spring、SpringMvc、Mybatis等。 3.项目功能点: 3-1.后端功能: 1.用户管…

解决GNURadio自定义C++ OOT块-导入块时报错问题

文章目录 前言一、问题描述二、解决方法1、安装依赖2、配置环境变量3、重新编译及安装三、结果1、添加结果2、运行结果前言 本文记录在 GNURadio 自定义 C++ OOT 块后导入块时报错 AttributeError: module myModule has no attribute multDivSelect。 一、问题描述 参考官方教…

作品展示ETL

1、ETL 作业定义、作业导入、控件拖拽、执行、监控、稽核、告警、报告导出、定时设定 欧洲某国电信系统数据割接作业定义中文页面&#xff08;作业顶层&#xff0c;可切英文&#xff0c;按F1弹当前页面帮助&#xff09; 涉及文件拆分、文件到mysql、库到库、数据清洗、数据转…

银行量子金融系统应用架构设计

量子金融&#xff08;即Financial-Quantum&#xff0c;简称Fin-Q&#xff09;&#xff0c;特指量子科技在金融行业中的应用。 目前&#xff0c;量子科技中以量子保密通信、量子随机数和量子计算发展进度较快&#xff0c;取得了诸多阶段性重大技术突破和商用成果&#xff0c;这…

【FLOOD FILL专题】【蓝桥杯备考训练】:扫雷、动态网格、走迷宫、画图、山峰和山谷【已更新完成】

目录 1、扫雷&#xff08;Google Kickstart2014 Round C Problem A&#xff09; 2、动态网格&#xff08;Google Kickstart2015 Round D Problem A&#xff09; 3、走迷宫&#xff08;模板&#xff09; 4、画图&#xff08;第六次CCF计算机软件能力认证&#xff09; 5、山…

【蓝桥杯】RMQ(Range Minimum/Maximum Query)

一.概述 RMQ问题&#xff0c;是求区间最大值或最小值&#xff0c;即范围最值问题。 暴力解法是对每个询问区间循环求解&#xff0c;设区间长度n&#xff0c;询问次数m&#xff0c;则复杂度是O ( nm )。 一般还可以使用线段树求解&#xff0c;复杂度是O(mlogn)。 但还有一种…

Postgresql数据库入门简介

Postgresql入门 1.Postgresql数据库简介 PostgresQL是一个功能强大的开源数据库系统。经过长达15年以上的积极开发和不断改进&#xff0c;PostgreSQL已在可靠性、稳定性、数据一致性等获得了业内极高的声誉。目前PostgreSql可以运行在所有主流操作系统上&#xff0c;包括Linux…

会员项目定价卡css3特效

会员项目定价卡css3特效&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面 下载地址 会员项目定价卡css3特效代码

【爬虫】web自动化和接口自动化

专栏文章索引&#xff1a;爬虫 目录 一、介绍 二、推荐 1.接口自动化 2.Web自动化 一、介绍 爬虫技术一般可以分为两种类型&#xff1a;接口自动化和web自动化。下面是它们的简要介绍&#xff1a; 1.接口自动化 接口自动化技术的主要目的是通过模拟HTTP请求来实现自动化…

Zama:链上隐私新标准

1. 引言 揭示 Web3 中全同态加密的潜在用例&#xff0c;并深入研究 Zama 的四种主要开源产品&#xff1a; TFHE-rsConcreteConcrete MLfhEVM 众所周知&#xff0c;在当今时代&#xff0c;数据隐私问题与互联网诞生以来一样普遍。仅 Yahoo!、Equifax 和 Marriott 的数据泄露就…

java动态规划学习笔记

学习笔记目录&#xff0c;这里记录个大纲&#xff0c;详情点链接 背包问题 01背包问题综述 01背包问题&#xff08;二维数组&#xff09;https://blog.csdn.net/m0_73065928/article/details/136794406?spm1001.2014.3001.5501 01背包问题&#xff08;滚动数组&#xff09…

LeetCode 热题 100 | 堆(一)

目录 1 什么是堆排序 1.1 什么是堆 1.2 如何构建堆 1.3 举例说明 2 215. 数组中的第 K 个最大元素 2.1 子树大根化 2.2 遍历所有子树 2.3 弹出栈顶元素 2.4 完整代码 菜鸟做题&#xff0c;语言是 C 1 什么是堆排序 1.1 什么是堆 堆的定义和分类&#xff…

ECharts5 概念篇1

图表容器及大小 初始化 在 HTML 中定义有宽度和高度的父容器&#xff08;推荐&#xff09; 通常来说&#xff0c;需要在 HTML 中先定义一个 <div> 节点&#xff0c;并且通过 CSS 使得该节点具有宽度和高度。初始化的时候&#xff0c;传入该节点&#xff0c;图表的大小默认…

海外客户获取难?海外云手机助力电商引流!

海外电商面临的市场竞争激烈&#xff0c;如何在海外市场获客成为了摆在许多卖家面前的难题。而在这个问题的解决方案中&#xff0c;海外云手机崭露头角&#xff0c;成为助力电商引流的新利器。 在当前市场中&#xff0c;云手机主要用于游戏挂机&#xff0c;但其潜力在海外电商领…

四、C语言中的数组:如何输入与输出二维数组(数组,完)

本章的学习内容如下 四、C语言中的数组&#xff1a;数组的创建与初始化四、C语言中的数组&#xff1a;数组的输入与元素个数C语言—第6次作业—十道代码题掌握一维数组四、C语言中的数组&#xff1a;二维数组 1.二维数组的输入与输出 当我们输入一维数组时需要一个循环来遍历…

AWS监控,AWS 性能监控工具

监控云部署的性能是 IT 环境正常运行的内在条件。AWS 云是一个架构良好的框架&#xff0c;管理员可以使用专用的AWS 性能监控工具增强服务的功能。执行AWS监视是为了跟踪在AWS环境中积极运行的应用程序工作负载和资源。AWS监视器跟踪各种AWS云指标&#xff0c;以帮助提高在其上…

刷题DAY30 | LeetCode 332-重新安排行程 51-N皇后 37-解数独

332 重新安排行程&#xff08;hard&#xff09; 给你一份航线列表 tickets &#xff0c;其中 tickets[i] [fromi, toi] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。 所有这些机票都属于一个从 JFK&#xff08;肯尼迪国际机场&#xff09;出发的先生&…

机器学习知识点复习 下(保研、复试、面试)百面机器学习笔记

机器学习知识点复习下 第八章、采样1.采样的作用 第九章、前向神经网络1.多层感知机与布尔函数2.神经网络中的激活函数3.多层感知机的反向传播算法4.神经网络训练技巧5.深度卷积神经网络6.深度残差网络 第十章、循环神经网络1.循环神经网络和卷积神经网络2.循环神经网络的梯度消…

【前端Vue】Vue3+Pinia小兔鲜电商项目第2篇:什么是pinia,1. 创建空Vue项目【附代码文档】

全套笔记资料代码移步&#xff1a; 前往gitee仓库查看 感兴趣的小伙伴可以自取哦&#xff0c;欢迎大家点赞转发~ 全套教程部分目录&#xff1a; 部分文件图片&#xff1a; 什么是pinia Pinia 是 Vue 的专属状态管理库&#xff0c;可以实现跨组件或页面共享状态&#xff0c;是…