vben框架下载文件功能后台接口返回数据流的形式下载成功之后打不开xlsx文件解决

本文主要介绍了在Vue3.0框架下,如何配置axios的responseType为'blob'以接收后台返回的数据流,并通过数据流下载xlsx文件。当遇到下载后文件无法打开的问题时,解决方案是确保data参数为Blob类型,并使用提供的downloadByData方法进行下载。该方法接收Blob数据、文件名、MIME类型和BOM作为参数,创建并触发下载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue3.0前端开源框架vben请求接口配置返回内容数据类型


返回内容配置responseType的值共有一下几种:
(1) arraybuffer
(2) blob
(3) document
(4) json
(5) text
(6) stream

问题描述:下载文件功能后台接口返回数据流的形式下载成功之后打不开xlsx文件

解决方式:直接代码
	export const downNumbers = (params?: any) =>
 	 defHttp.post<any>(
    	{ url: Api.downNumbers, params, responseType: 'blob' },
    	{ errorMessageMode: 'none', isTransformResponse: false },
 	 );

注: 配置项 reponseType:’ 'blob '*为关键 必须配置,因为需要使用vben框架封装的数据流转文件方法,代码如下:

/**
 * Download according to the background interface file stream
 * @param {*} data
 * @param {*} filename
 * @param {*} mime
 * @param {*} bom
 */
export function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {
  const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];
  const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });

  const blobURL = window.URL.createObjectURL(blob);
  const tempLink = document.createElement('a');
  tempLink.style.display = 'none';
  tempLink.href = blobURL;
  tempLink.setAttribute('download', filename);
  if (typeof tempLink.download === 'undefined') {
    tempLink.setAttribute('target', '_blank');
  }
  document.body.appendChild(tempLink);
  tempLink.click();
  document.body.removeChild(tempLink);
  window.URL.revokeObjectURL(blobURL);
}

注:此方法接受data数据流参数必须是blob类型,亲测别的类型会出现下载成功之后文件打不开的现象

responseType类型相关链接

vben admin框架是一款基于Vue.js的后台管理前端框架,它提供了一套预设的组件库用于快速搭建行政管理系统。当你需要从服务器接口获取数据来填充表单的下拉列表(通常称为选择器或dropdown)时,你可以按照以下步骤操作: 1. **定义数据获取方法**: 首先,在你的组件里创建一个函数,使用axios或其他HTTP客户端库发送GET请求到指定的接口。例如: ```javascript async getData() { const response = await axios.get('/api/dropdown-data'); return response.data; } ``` 2. **设置默认的`componentProps`**: 在你的组件的data或computed属性中,初始化`options`数组,初始值可以是空或者默认选项: ```javascript data() { return { options: [], // ...其他数据 }; }, computed: { fetchedOptions() { return this.getData().then((data) => { if (data && data.length > 0) { return data.map(item => ({ value: item.id, label: item.name })); } else { return []; } }); } } ``` 3. **动态绑定`options`到下拉框组件**: 使用`v-for`遍历`fetchedOptions`,将`label`和`value`作为属性传递给`<select>`或`<el-select>`等下拉框组件: ```html <template> <el-form-item label="下拉框"> <el-select v-model="selectedValue" placeholder="请选择..."> <el-option v-for="option in fetchedOptions" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> </el-form-item> </template> <script> export default { data() { return { selectedValue: '', }; }, computed: { ... // 这里已经包含了fetchedOptions计算属性 }, }; </script> ``` 当接口返回的数据改变时,`fetchedOptions`会自动更新,从而更新下拉框的选择项。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值