table 表格数据导出excel

方便将table表格数据导出为Excel，所见即所得。

本地运行

git clone https://github.com/WGinit/export-table.git
cd export-table
pnpm i

// 本地运行
yarn dev

// 打包
yarn build

methods

export2excel

const options = {
    el: 'export-table',
    type: 'xls',
    fileName: ''
}
export2excel(options)

options

| 参数 | 类型 | 是否必填 | 说明| |:---:|:---:|:---:| :---: | | el | string 或 element| Y | table的id 或 table的htmltableelement | | type | string | N | 导出的文件类型，默认xls，目前仅支持xls | | fileName | string | N | 导出的excel名称 | | datas | array | N | API接口返回的数据的导出 |

datas 结构:

[{
    sheetData: [ // API 接口返回的数据
        { one: "一行一列", two: "一行二列" },
        { one: "二行一列", two: "二行二列" },
    ],
    sheetName: "sheet1",  // 当前单表的名称
    sheetFilter: ["two", "one"], // 需要显示的字段
    sheetHeader: ["第一列", "第二列"],  // excel 标题
    columnWidths: [20, 20], // 自定义excel列宽
}]

datas内一个Object为一个excel表格，可以一次导出多张表格。

Demo

// 安装
pnpm i table-export-file
// 引入
const export2excel = require('table-export-file')

// 1、导出单页表格数据

`<table id="export">
    <thead>...</thead>
    <tbody>...<tbody>
</table>`

// 导出
export2excel({
    el: 'export',
    fileName: 'test'
})
或者
const el = document.getElementById('export')
export2excel({
    el,
    fileName: 'test'
})   // 这种适合对table数据二次自定义后再导出


// 2、导出API接口数据
const ret = await storeService()
export2excel({
    fileName: 'test', // 文件名
    datas: [{
        sheetData: ret,
        sheetName: 'sheet',
        sheetHeader: ['店铺名称', '店铺SN'],
        sheetFilter: ['store_name', 'store_sn'],
        columnWidths: [100, 100]
    }]
})

ToDo

• [ ] 增加pdf、csv、doc等多种文件导出
• [ ] 增加Typescript