纯前端表格导出excel

最新推荐文章于 2024-09-02 17:34:07 发布

前端小菜鸟也有人起

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量344

点赞数 2

文章标签：前端 excel

本文链接：https://blog.csdn.net/weixin_63730900/article/details/141820729

版权

npm i xsls

npm i file-saver

import FileSaver from "file-saver";
import * as XLSX from "xlsx";

<el-button type="primary" @click="exportExcel">导出Excel</el-button>
<el-table id="out-table"

const exportExcel = () => {
    // console.log(XLSX);
    // 获取表格数据
    const table = document.querySelector('#out-table');
    const data = [];
    const headers = [];

    // 获取表头
    table.querySelectorAll('th:not(:last-child)').forEach(th => {
        headers.push(th.innerText.trim());
    });

    // 获取表格数据
    table.querySelectorAll('tbody tr').forEach(tr => {
        const rowData = [];
        tr.querySelectorAll('td:not(:last-child)').forEach(td => {
            rowData.push(td.innerText.trim());
        });
        data.push(rowData);
    });

    // 创建工作簿
    const ws = XLSX.utils.aoa_to_sheet([headers, ...data]);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

    var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });

    try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '控流记录.xlsx');
    } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout);
        }
    return wbout;
}

这里我不需要导入最后一行