Vue实战【后端返回ArrayBuffer时，前端如何处理并成功下载ArrayBuffer文件】

文章目录 🌟前言🌟后端返回来的【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内部的data const 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！

✨原创不易，还希望各位大佬支持一下！ 👍 点赞，你的认可是我创作的动力！ ⭐️ 收藏，你的青睐是我努力的方向！ ✏️ 评论，你的意见是我进步的财富！