vue2+elementui导出elementui的表格数据,不用我自己设置表头
时间: 2023-10-17 21:16:02 浏览: 131
你可以使用 `xlsx-populate` 库和 `xlsx-style` 库来导出 `element-ui` 的表格数据,以下是一个示例代码:
```javascript
import XlsxPopulate from 'xlsx-populate'
import { saveAs } from 'file-saver'
import XLSXStyle from 'xlsx-style'
export const exportExcel = async (tableData, fileName) => {
const wb = await XlsxPopulate.fromBlankAsync()
const ws = wb.sheet('Sheet1')
// 获取表头
const headers = []
tableData.columns.forEach(column => {
headers.push(column.label)
})
// 设置表头
headers.forEach((header, index) => {
ws.cell(1, index + 1).value(header)
})
// 设置表格数据
tableData.data.forEach((row, rowIndex) => {
headers.forEach((header, colIndex) => {
ws.cell(rowIndex + 2, colIndex + 1).value(row[header])
})
})
// 导出表格
const buffer = await wb.outputAsync()
const blob = new Blob([buffer], { type: 'application/octet-stream' })
saveAs(blob, `${fileName}.xlsx`)
}
```
其中 `tableData` 是 `element-ui` 的表格数据,`fileName` 是导出的文件名。在代码中,我们使用 `tableData.columns` 获取表头,不用自己设置表头。但是,这个方法不能处理表头的样式,如果你需要表头的样式,可以使用 `xlsx-style` 库。在导出表格时,我们使用 `saveAs` 函数将文件保存到本地。
阅读全文