vue2和3 中导出xlsx数据

1.安装xlsx

npm install xlsx

2.创建exportExcel.js 文件

import * as XLSX from "xlsx";
var dataConversionUtil = {};
dataConversionUtil.dataToExcel = function(fileName,tableHeader,dataList,sheet="sheet1"){
    let aoa = [];
    aoa = tableHeader.concat(dataList);
    let workSheet = XLSX.utils.aoa_to_sheet(aoa);
    let workBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workBook,workSheet,sheet)
    XLSX.writeFile(workBook, fileName + ".xlsx")
}
export { dataConversionUtil }

3.vue2 页面代码

<template>
  <div>
    <el-button plain type="success" icon="el-icon-download" @click="exportsExportBtn">导出</el-button>
    <el-table :data="tableList" border>
      <el-table-column label="名称" prop="name" align="center"/>
      <el-table-column label="年龄" prop="age" align="center"/>
      <el-table-column label="性别" align="center">
        <template #default="scope">
          {{ ['', '男', '女'][scope.row.sex] }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {dataConversionUtil} from "../utils/exportExcel.js";
export default {
  name: "Test",
  data() {
    return {
      tableList: [ // 需要导出的数据
        {name: "张三", age: 12, sex: 1},
        {name: "李四", age: 13, sex: 2},
        {name: "王五", age: 14, sex: 1}]
    }
  },
  methods: {
    exportsExportBtn () {
      let vm = this;
      let tableHeader = [['名称', '年龄', '性别']];
      let tableData = vm.tableList.map(item => {
        return {
          name: item.name,
          age: item.age,
          sex: item.sex === 1 ? '男' : '女',
        }
      });
      let dataList = [];
      tableData.forEach((item, index) => {
        dataList.push([
          item.name,
          item.age,
          item.sex,
        ]);
      });
      let time = Date.now();
      let xlsxName = '用户列表' + time;
      dataConversionUtil.dataToExcel(xlsxName, tableHeader, dataList)
    }
  },
}
</script>

4.vue3 页面代码

<template>
  <el-button plain type="success" icon="el-icon-download" @click="exportsExportBtn">导出</el-button>
  <el-table :data="tableList" border>
    <el-table-column label="名称" prop="name" align="center"/>
    <el-table-column label="年龄" prop="age" align="center"/>
    <el-table-column label="性别" align="center">
      <template #default="scope">
        {{ ['', '男', '女'][scope.row.sex] }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {ref} from "vue";
import {dataConversionUtil} from "../utils/exportExcel.js";
// 需要导出的数据
let tableList = ref([{name: "张三", age: 12, sex: 1}, {name: "李四", age: 13, sex: 2}, {
  name: "王五",
  age: 14,
  sex: 1
}]);
const exportsExportBtn = () => {
  let tableHeader = [['名称', '年龄', '性别']];
  let tableData = tableList.value.map(item => {
    return {
      name: item.name,
      age: item.age,
      sex: item.sex === 1 ? '男' : '女',
    }
  });
  let dataList = [];
  tableData.forEach((item, index) => {
    dataList.push([
      item.name,
      item.age,
      item.sex,
    ]);
  });
  let time = Date.now();
  let xlsxName = '用户列表' + time;
  dataConversionUtil.dataToExcel(xlsxName, tableHeader, dataList)
}
</script>