vue3导出excel表格方式 ---XLSX文件（最快的导出方法 ）

前几天做了一个需要用于导出 excel的功能，今天我来给大家分享一下

首先需要导入的插件有：

npm install element-plus --save,//elementplus的组件库（这个可用可不用，我用的是组件的按钮所以需要使用到他）
npm install xlsx --save//xlsx的插件

现在看看代码吧 

<script setup>
import { reactive, ref } from "vue";
import XLXS from "xlsx";
import FileSaver from "file-saver";
defineProps({
  msg: String,
});
const count = ref(0);
const state = reactive({
  excelTitle: "表格标题1",
});
const tableData = reactive([
  {
    date: "2016-05-02",
    name: "安欣",
    address: "上海市 1518 路",
  },
  {
    date: "2016-05-04",
    name: "高启强",
    address: "上海市 1517 路",
  },
  {
    date: "2016-05-01",
    name: "高启盛",
    address: "上海市 1519 路",
  },
  {
    date: "2016-05-03",
    name: "唐小虎",
    address: "上海市 1516 路",
  },
]);
const exportClick = () => {
  // 设置当前日期
  let time = new Date();
  let year = time.getFullYear();
  let month = time.getMonth() + 1;
  let day = time.getDate();
  let name = year + "" + month + "" + day;
  // 导出文件名
  const filename = state.excelTitle;
  // 通过id，获取导出的表格数据
  const wb = XLXS.utils.table_to_book(document.getElementById("table"), {
    raw: true,
  });
  const wbout = XLXS.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: "array",
  });
  try {
    FileSaver.saveAs(
      new Blob([wbout], {
        type: "application/octet-stream",
      }),
      name + ".xlsx"
    );
  } catch (e) {
    console.log(e);
  }
  return wbout;
};
</script>

<template>
  <div class="home">
    <button type="button" @click="exportClick()">导出pdf</button>
    <div id="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>
#pdfDom {
  color: #42b983;
}
</style>

 祝各位女程序员大家女神节快乐！（如果有需要还麻烦你们动动你们的小手点个关注。谢谢啦）