说明

在后台管理系统中，有个必不可少的功能，就是把数据导出成excel文件。

依赖

在cmd使用该命令下载该依赖文件

cnpm install file-saver --save

下载完成在vue文件中引入

import { saveAs } from 'file-saver'

接口

前端调用接口
注意请求头的类型和响应的格式

// 导出客户列表
export const exportCustomerApi = (data) => http({
   url: '/prod-api/customer/export',
   method: 'post',
   data: data,
   headers: {
      'Content-Type': "application/x-www-form-urlencoded"
   },
   responseType: 'blob'
})

方法

调用接口成功之后 使用saveAs方法导出成excel文件

async exportExl() {
    const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
    }
    const res = await exportCustomerApi(data)
    if (!res) return;
    // 处理成表格文件之后调用一个保存数据的方法，浏览器会自动下载
    console.log(res);
    saveAs(
        // Blob 对象表格一个不可变、原始数据的类文件对象
        // Blob 表示的不一定是JavaScript原生格式的数据
        // File 接口基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件
        // 返回一个新创建的Blob对象，其内容参数中给定的数组串联组成
        new Blob([res]),
        // 设置导出文件名称
        `客户档案_${new Date().getTime()}.xlsx`
    )
},