首先需要导入的插件有：
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>
