Vue 后端接口返回数据流,转换成excell表格

首先,感谢 master女士 提供的思路,找了好久,最后实测很好用!

这是后端接口返回的数据流:
在这里插入图片描述

首先需要在请求接口方法里定义 responseType
api.js

//  导出
export function teamandmember_downloadTeam(data) {
  return request({
    url: "business/teamsanwan/downloadTeam.do",
    method: "post",
    data,
    responseType: 'blob' // 重点代码
  });
}

接着对数据流直接进行处理就可以了。

teamandmember_downloadTeam(params).then((res) => {
    let blob = new Blob([res], { type: "application/vnd.ms-excel;charset=utf-8"} ); // 重点代码
    let a = document.createElement("a");
    a.href = window.URL.createObjectURL(blob);
    a.setAttribute("download", `xxx_${new Date().getTime()}.xlsx`); // 表名,自定义
    a.click(); // 执行下载
    window.URL.revokeObjectURL(a.href); // 释放ur
}).catch((err) => { // 错误处理
  	conosle.log(err);
}
后端通过HTTP请求返回Excel文件时,前端通常需要将其转换为可操作的数据结构。以下是一般的处理步骤: 1. **接收响应**: 使用Vue的`axios`或类似的库发送GET请求获取Excel文件,例如: ```javascript axios({ method: 'get', url: '/api/download/excel', // 后端接口地址 responseType: 'blob' // 指定响应类型为二进制 }) .then(response => { const file = response.data; // 响应的Blob对象 }); ``` 2. **解析blob到arrayBuffer**: Blob需要转换为ArrayBuffer才能进一步操作: ```javascript URL.createObjectURL(file) .then(url => { return fetch(url) // 创建URL后再次fetch .then(res => res.arrayBuffer()); }) .then(arrayBuffer => { // arrayBuffer 是Excel文件的二进制表示 }); ``` 3. **使用第三方库解析ArrayBuffer**: 你可以使用诸如`xlsx`, `js-xlsx`, 或者`file-saver`这样的库将ArrayBuffer转换为JSON或其他易于处理的数据格式。这里以`xlsx`为例: ```javascript import XLSX from 'xlsx'; XLSX.read(arrayBuffer, { type: 'binary' }) // 假设arrayBuffer已经准备好 .then(sheet => { const data = sheet.data; // 获取表格数据 // 对数据进行处理(如转换、过滤等) processData(data); }); ``` 4. **处理数据**: 将获取到的数据按照业务需求进行处理,可能需要提取特定列,或者根据特定规则合并、排序等。 5. **保存或显示数据**: 数据处理完成后,可以选择直接在前端渲染,也可以下载为CSV或者其他格式,供用户查看或导出。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值