安装插件
npm install --save file-saver
npm install --save xlsx
使用
<!-- 在html中 -->
<!-- id="table"是用于获取要导出表格的节点 -->
<div id="table">
<el-table :data="tableData" style="width: 100%" border>
<el-table-column label="广告ID" width="140" align="center" prop="id"></el-table-column>
<el-table-column label="广告标题" width="140" align="center" prop="name"></el-table-column>
<el-table-column label="广告内容" width="140" align="center" prop="content"></el-table-column>
<el-table-column label="广告图片" width="140" align="center">
<template #default="scope">
<img :src="scope.row.url" style="width: 100px;">
</template>
</el-table-column>
<el-table-column label="广告位置" width="140" align="center" prop="position"></el-table-column>
<el-table-column label="活动链接" width="140" align="center" prop="link"></el-table-column>
<el-table-column label="是否启用" width="140" align="center">
<template #default="scope">
<el-tag size="large">{{ scope.row.enabled ? "启用" : "禁用" }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button size="default" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="default" type="danger" @click="handleDelete(scope.$index, scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<script lang="ts" setup>
import FileSaver from 'file-saver';//引入导出插件
import XLXS from 'xlsx';//引入表格插件
// 导出表格
const exportClick = () => {
// 导出文件名
const filename = '导出表格.xlsx';
// 导出表格加id,通过表格id获取要导出的表格数据
const wb = XLXS.utils.table_to_book(document.getElementById("table"))//一定要在table标签中添加id
const wbout = XLXS.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array',
});
try {
FileSaver.saveAs(
new Blob([wbout], {
type: 'application/octet-stream',
}),
filename
);
} catch (e) {
console.log(e)
}
return wbout
}
</script>
说明:直接复制代码无效果,需灵活运用,重点在于id的定义和js代码