前端Ajax请求从后端获取二进制文件并下载

2024-03-26 08:52

本文主要是介绍前端Ajax请求从后端获取二进制文件并下载,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

大家都知道前端的下载除了最简单的a标签href,还有时候需要验证token,此时后台会给一个返回二进制的下载接口。如果你用ajax普通的get,post请求,接口会返回乱码。那么本文就带你封装一个处理二进制下载的方法。

1.设置responseType为arraybuffer

这是正确获取二进制的关键,否则会被当成json文本来解析。

const response = await axios({method,url,data,responseType: 'arraybuffer',headers,
});

2.判断是否下载成功 

只有下载成功的时候返回的才是arraybuffer,否则是包含错误信息的json,因此在这里我们通过响应头的contentType来判断。

if (contentType?.includes('application/json')) {// 响应的是json则提示错误信息const res = JSON.parse(new TextDecoder('utf-8').decode(new Uint8Array(response.data)));if (res.code !== 200) {ElMessage({message: res.msg,type: 'error',duration: 5 * 1000});return;}
}

3.获取blobUrl 

// blobType可以是空对象,或指定的excel等MIME类型
const data = new Blob([response.data], blobType); 
const src = window.URL.createObjectURL(data);

4.下载文件 

传入获取到的blobUrl,可以用第三方库file-saver下载,也可以用a标签的download属性。file-saver对各浏览器做了blob等兼容处理。

import { saveAs } from 'file-saver';// 第一种 使用第三方库 file-saver
saveAs(src, filename); // 第二种 a标签
function aTagDownload(src, filename) {const link = document.createElement('a');link.href = src;link.setAttribute('download', filename);document.body.appendChild(link);link.click();document.body.removeChild(link);window.URL.revokeObjectURL(src);
}

完整代码

/*** 下载二进制文件* @param {string} method 必填 请求方式* @param {string} url 必填 下载 url* @param {object} data post 请求的 data,默认为空对象* @param {object} headers 请求的 headers* @param {string} [filename=下载.zip] 保存的文件名* @param {boolean} isDownload 是否直接下载* @param {object} blobType 指定 blob MIME 类型,默认为空对象* @returns {string} blobUrl*/
export async function getBufferFile(method = 'get',url,data = {},headers,filename = '下载.zip',isDownload = true,blobType = {},
) {headers = {...headers,Authorization: localStorage.getItem('token'),};ElMessage.success('已开始下载');try {const response = await axios({method,url,data,responseType: 'arraybuffer',headers,});const contentType = response.headers['content-type'];// 根据响应头的contentType判断是否下载成功if (contentType?.includes('application/json')) {// 响应的是json则提示错误信息const res = JSON.parse(new TextDecoder('utf-8').decode(new Uint8Array(response.data)));if (res.code !== 200) {ElMessage({message: res.msg,type: 'error',duration: 5 * 1000});return;}} else {const data = new Blob([response.data], blobType);const src = window.URL.createObjectURL(data);// 从响应头获取文件名if (response.headers['content-disposition']) {filename = decodeURI(response.headers['content-disposition'].split('filename=')[1]);}if (isDownload) {saveAs(src, filename); // 使用第三方库 file-saver}return src;}} catch (error) {console.error('下载文件失败:', error);ElMessage.error('下载文件失败');}
}

这篇关于前端Ajax请求从后端获取二进制文件并下载的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/847952

相关文章

python获取网页表格的多种方法汇总

《python获取网页表格的多种方法汇总》我们在网页上看到很多的表格,如果要获取里面的数据或者转化成其他格式,就需要将表格获取下来并进行整理,在Python中,获取网页表格的方法有多种,下面就跟随小编... 目录1. 使用Pandas的read_html2. 使用BeautifulSoup和pandas3.

SpringBoot UserAgentUtils获取用户浏览器的用法

《SpringBootUserAgentUtils获取用户浏览器的用法》UserAgentUtils是于处理用户代理(User-Agent)字符串的工具类,一般用于解析和处理浏览器、操作系统以及设备... 目录介绍效果图依赖封装客户端工具封装IP工具实体类获取设备信息入库介绍UserAgentUtils

SpringBoot请求参数接收控制指南分享

《SpringBoot请求参数接收控制指南分享》:本文主要介绍SpringBoot请求参数接收控制指南,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring Boot 请求参数接收控制指南1. 概述2. 有注解时参数接收方式对比3. 无注解时接收参数默认位置

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Linux下如何使用C++获取硬件信息

《Linux下如何使用C++获取硬件信息》这篇文章主要为大家详细介绍了如何使用C++实现获取CPU,主板,磁盘,BIOS信息等硬件信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录方法获取CPU信息:读取"/proc/cpuinfo"文件获取磁盘信息:读取"/proc/diskstats"文

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n