前言

在开发项目中遇到需要导出列表的功能，一开始是前端做的，后来leader说要改成后台做，那么办法就是后台返回文件流然后前端执行下载。

前端做导出请移步vue-xlsx 导出数据公共组件

接受后台返回的文件流请接着往下看

后台返回来的数据流其实是二进制格式的文件，所以可以用blob接收

第一种方法Blob对象下载文件流

首先要使用这个对象就要先了解这个对象，所以，
想了解blob的请移步web-api-blob
api介绍的很详细，我就不介绍了。
了解完了之后，基本上知道咋回事了，然后直接上代码，记录下来方便以后使，我这里是vue-cli的项目，所以我封装了公共方法，那个页面使用直接调用就可以了。

step 一，在公共得js内创建自己的方法

export function export_excel_file(export_data,list_name){
  let link = document.createElement("a");
 //    type就是blob的type,是MIME类型的，可以自己查看MIME类型都有哪些
  let blogw = new Blob([export_data],{type:"application/vnd.ms-excel;charset=utf-8"})
  let objectUrl = window.URL.createObjectURL(blogw);    //创建一个新的url对象
  link.href = objectUrl;
  let file_name = `${moment().format('YYYY-MM-DD HH:mm:ss')}的${list_name}列表.xlsx`;
  link.download = file_name;    //  下载的时候自定义的文件名
  link.click();
  window.URL.revokeObjectURL(objectUrl);   //为了更好地性能和内存使用状况，应该在适当的时候释放url.
    
}

step 二，在需要引用引用的页面调用这个方法就阔以了。

import { moneyFormat, export_excel_file } from "@/utils";
//这个是封装好的接口数据
import {
  withDrawList,
  approved,
  reject,
  admin_withdraw_export,
} from "@/api/finance";
export default {
        data(){
            return:{}   
        },
    methods:{
          export_excel_file,
            // 订单导出
         exportOrderList() {
      this.listLoading = true;
      admin_withdraw_export(this.listQuery)
        .then((response) => {
          let list_name = "提现";
          this.export_excel_file(response, list_name);
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
          this.$message({
            message: "导出失败",
            type: "error",
            center: true,
            duration: "2000",
          });
        });
    },
        }
}

重要的提示一定要在自己封装好的接口中加入'responseType':"arraybuffer",这个参数，否则下载下来的就是乱码。

import request from '@/utils/request'

// 提现列表
export function withDrawList(data) {
  return request({
    url: '/admin/workerWithDraw/admin-page',
    method: 'post',
    data
  })
}

// 提现-导出
export function admin_withdraw_export(data) {
  return request({
    url: '/admin/workerWithDraw/admin-export',
    method: 'post',
    data,
    'responseType':"arraybuffer",
  })
}

正常的axios请求是这样写

this.axios.post(baseUrl,Params,{'responseType':"arraybuffer"}).then(response=>{
            let list_name = "提现";
          this.export_excel_file(response, list_name);
      })

第二种方法使用插件js-file-download下载文件流

step 一，下载安装这个插件

npm install js-file-download --save

step 二，在需要引用的页面引入,这方法也是需要接口传入'responseType':"arraybuffer"参数

import fileDownload from "js-file-download";
 fileDownload(response,'dsdasd.xls'); 

结束语

这里做个笔记，便以后学习，后期还有学到的导出的知识还会更新。