想要實(shí)現(xiàn)前端對(duì)表格中的數(shù)據(jù)進(jìn)行導(dǎo)出，這里推薦使用xlsx這個(gè)依賴庫(kù)實(shí)現(xiàn)。

1、安裝

pnpm install xlsx

2、使用

import * as XLSX from "xlsx";

直接在組件里導(dǎo)入XLSX庫(kù)，然后給表格table通過ref創(chuàng)建響應(yīng)式數(shù)據(jù)拿到table實(shí)例，將實(shí)例傳給XLSX.utils.table_to_book()方法，再使用XLSX.writeFile()就可以下載excel文件了。具體方法請(qǐng)看demo源代碼。

3、demo源代碼

<template><div class="page6"><div style="display:flex;justify-content: flex-end"><el-button type="primary" @click="exportExcel">導(dǎo)出</el-button></div><el-table ref="tableRef" :data="tableData" stripe style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table></div>
</template><script setup>
import * as XLSX from 'xlsx'
const tableRef = ref(null)
const exportExcel = () =>{const tableDom = tableRef.value?.$el;if (tableDom) {const wb = XLSX.utils.table_to_book(tableDom);XLSX.writeFile(wb, '表格數(shù)據(jù).xlsx');}}
const tableData = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]
</script><style lang="less" scoped>
.page6{width: 100%;height: 100%;padding: 20px;
}</style>

4、效果

下載的excel文件