Bootstrap

vue3下载表格

  1. 安装插件

npm install --save file-saver
npm install --save xlsx
  1. 使用

<!-- 在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代码

;