server端实现

使用xlsx插件实现表单文件导出功能

controller.js 文件

async export () {
    let query = this.ctx.query;
    this.ctx.validate({     
      type: {
        type: 'number',
        required: true,
        convertType: 'number'
      },      
    }, query);
    let res = await this.ctx.service.user.exportExcel(query);

    this.ctx.body = res;
    this.ctx.status = 200;
}

service.js 文件

// 引入xlsx插件
 const XLSX = require('xlsx');

// 处理excel数据
initData(arr) {
    let header;
    let data;
    
    // 表头数据处理
    header = {
            name: '员工姓名',
            avatar: '头像',
            sex: '性别'
    }

    // 表体数据处理
    data = arr;

    return {
        header,
        data
    }
 }

// 导出Excel用户表
async exportExcel(params) {
      // 模拟数据
      let allList = [{ 
                name: 'aaa',
                avatar: 'aaa.png',
                sex: '女'
        },{ 
                name: 'bbb',
                avatar: 'bbb.png',
                sex: '男'
      }];

      // 初始化数据
      let {
            header,
            data
      } = this.initData(allList.data.list);
     
      // 生成workbook
     const workbook = XLSX.utils.book_new();

      // 整合表数据
      const headerData = [header, ...data];

      // 生成worksheet
      const worksheet = XLSX.utils.json_to_sheet(headerData, {
            skipHeader: true
      });

      // 生成表单
      XLSX.utils.book_append_sheet(workbook, worksheet, '统计表');
        
      // 返回数据流
      this.ctx.set('Content-Type', 'application/vnd.openxmlformats');
      this.ctx.set(
            'Content-Disposition',
            "attachment;filename*=UTF-8' '" + encodeURIComponent('用户信息统计表') + '.xlsx',
      );
  
      // 返回数据
      return await XLSX.write(workbook, {
            bookType: 'xlsx',
            type: 'buffer',
      });
 }    

前端Vue实现文件下载

添加导出按钮

// template
<a-button
          class="z_btn"
          type="primary"
          @click="exportExel"        
          :loading="loading"
          >导出</a-button>

script下载方法实现

import { exportRequest } from ‘api’;
 // 导出数据
 exportExel() {    
      this.loading = true;
      let obj = {
        type: 1,
      };     
      
     // 去Server请求数据
      exportRequest(obj).then((res) => {
        
        // 使用a标签下载文件
        let el = document.createElement("a");
        el.href = window.URL.createObjectURL(new Blob([res]));
        el.target = "_blank";
        // 文件名和格式
        el.download = "统计表.xlsx";
        el.style.display = 'none';
        document.body.appendChild(el);
        el.click();
        
       // 释放资源
        document.body.removeChild(el);
        this.loading = false;
        window.URL.revokeObjectURL(el);
      });     
    },

注意：axios 的 responseType 类型设置为blob，如下所示

export const exportMemList = (payload)=>{
  return http.request({
    method: 'get',
    url: '/api/export',
    payload,
    responseType: "blob"
  })
}