vue3导出Excel表格

平时我们做后台项目的时候需要做列表的导出功能，有一种列表导出是纯前端导出，另一种列表导出则是需要调用后端的导出接口
我这边演示的都是vue3的格式

1、纯前端导出Excel表格
（1）、首先下载 js-export-excel
npm install js-export-excel;
（2）、引入（main.js引入或者第3步的js里引入都可以）
import ExportJsonExcel from "js-export-excel";
（3）、单独封装成一个js，建一个exportExcel.js（很多地方都用得到）

import ExportJsonExcel from "js-export-excel";
const downExcel = (dataTable, name) => {
  let option = {}; //   option代表的就是excel文件
  option.fileName = name; //excel文件名
  //excel文件数据
  let headerList = Object.keys(dataTable[0]);
  option.datas = [
    {
      //   excel文件的数据源
      sheetData: dataTable,
      //   excel文件sheet的表名
      sheetName: "sheet",
      //   excel文件表头名
      sheetHeader: headerList,
      //   excel文件列名
      sheetFilter: headerList,
    },
  ];
  //   创建ExportJsonExcel实例对象
  let toExcel = new ExportJsonExcel(option);
  //   调用保存方法
  toExcel.saveExcel();
}
export {
  downExcel
}

（4）、使用，在你需要的页面引用exportExcel.js文件

<template>
     <div @click="uploadExcel">我要导出数据</div>
</template>
<script setup>
import { downExcel } from "./exportExcel"; //根据你的项目实际路径引入
import { reactive } from 'vue'
const state = reactive ({
   list:[ //这个是要导出的模拟数据
     {name: '张三', sex: '男', age: '18'},
     {name: '李四', sex: '男', age: '30'},
     {name: '王五', sex: '男', age: '25'}
   ]
})

const uploadExcel = () => {
  let dataTable = []
  if (state.list?.length === 0){
      //如果数据为空可以给个错误提示
      return
  }
  for (const i of state.list) {
    let obj = {
      '姓名': i.name,
      '性别': i.name,
      '年龄': i.name
    };
    dataTable.push(obj); //   设置excel每列获取的数据源
  }
  downExcel(dataTable, '人员数据')
}
</script >

2、调后端接口导出
（1）、注意接口的返回类型为：responseType: ‘blob’
（2）、转换二进制的方法封装成一个js

const downBlob = (data, filePath) => {
  let blob = new Blob([data], {
    type: "application/octet-stream; charset=UTF-8"
  })
  if ('download' in document.createElement('a')) { // 非IE下载
    const elink = document.createElement('a')
    elink.download = filePath
    elink.style.display = 'none'
    elink.href = URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href) // 释放URL 对象
    document.body.removeChild(elink)
  } else { // IE10+下载
    navigator.msSaveBlob(blob, fileName)
  }
}
export {
  downBlob
}

（3）、接口请求

import { downBlob} from "./exportExcel"; //根据你的项目实际路径引入
	// 导出数据
	const exportTable = () => {
		DOC_API.docMemberExport(parmas).then(res => {
			downBlob(res, '学习统计.xls')
		})

	}