Excel导出操作

 <div class="right">      
    <el-button size="mini" @click="exportEmployee">excel导出el-button>
 div>

安装file-saver
$ npm i file-saver
$ yarn add file-saver

//下包后引入 
import FileSaver from "file-saver";
methods:{
//导出
   async exportEmployee() {
     const result = await exportEmployee(); // 导出所有的员工接口
      // console.log(result) // 使用一个npm包 直接将blob文件下载到本地 file-saver
      // FileSaver.saveAs(blob对象,文件名称)
     FileSaver.saveAs(result, "员工信息表.xlsx"); // 下载文件
   },
}

接口

// excel导出
export function exportEmployee() {
  return request({
    url: "/sys/user/export",
    method: "GET",
    // 改变接收数据的类型 默认为json
    responseType: "blob", // 使用blob接收二进制文件流
  });
}

拦截器判断是不是blob类型,如果是直接返回数据,不再进行解构
Excel导出操作_第1张图片
在这里插入图片描述
Excel导出操作_第2张图片

你可能感兴趣的:(excel)