文章目录
- 🌟前言
- 🌟后端返回来的【ArrayBuffer】是什么样子的
- 🌟后端为什么要返回来的【ArrayBuffer】的形式
- 🌟前端处理文件流并且成功下载
- 🌟结语
🌟前言
哈喽小伙伴们，在我们日常工作当中，大家一定会遇到 文件导出 这样的功能需求点；导出功能前端后端都可以实现，通常情况下呢是由我们后端同事去处理的，那么当我们后端同事给你返回【ArrayBuffer】的时候，前端要怎么处理并且完成下载呢？今天就给大家说个简单的方法，我们一起来看下吧🤘
🌟后端返回来的【ArrayBuffer】是什么样子的
这里用图片来说明一下
🌟后端为什么要返回来的【ArrayBuffer】的形式
- 会更加灵活，具有扩展性；
- 前端下载时，不确定该文件的文件名和后缀，此时需要后端来告知；
- 文件流的形式，前端无法做出更多判断以及处理。
🌟前端处理文件流并且成功下载
这里以Vue为主实现
在导出接口文件里写入：
import request from '@/utils/request';// 车辆运行分析导出
export function exportCarRunAnalyse(data) {return request({url: '/statistics/exportCarRunAnalyse',method: 'post',data});
}
调取该接口的页面里写入：
async download(id) {const { data, code, msg } = await downFileById(id)console.log(data)if (code && code !== 0) {this.$message.error(msg)} else {let fileName = data.fileName;let array = data.buffer;// 获取到buffer内部的dataconst buffer = new ArrayBuffer(array.length);const view = new Uint8Array(buffer);for (let i = 0; i < array.length; i++) {view[i] = array[i];}//主要部分是上面转化数组的部分let blob = new Blob([buffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});let elink = document.createElement('a');elink.href = URL.createObjectURL(blob);elink.download = fileName;document.body.appendChild(elink);elink.click();document.body.removeChild(elink);}},
这时点击导出，即可将 【ArrayBuffer】 下载为文件
🌟结语
方法有好多，这只是其中的一种，也欢迎大家补存，共同学习。各位小伙伴让我们 let’s be prepared at all times！
✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！
