当前位置：首页 > news >正文

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

news 2025/9/8 11:10:42

文章目录

🌟前言
🌟后端返回来的【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);
      }
    },