在vue3中,给我一个提取对象数据,并输出.xlsx文件的实例
时间: 2023-05-20 19:05:23 浏览: 134
Vue2 D3.js demo
5星 · 资源好评率100%
当然可以,以下是一个示例代码:
```javascript
<template>
<div>
<button @click="exportData">导出数据</button>
</div>
</template>
<script>
import { export_json_to_excel } from '@/excel/Export2Excel'
export default {
data() {
return {
tableData: [
{
name: '张三',
age: 18,
gender: '男'
},
{
name: '李四',
age: 20,
gender: '女'
}
]
}
},
methods: {
exportData() {
const data = this.formatJson(this.tableData)
const tHeader = ['姓名', '年龄', '性别']
const filterVal = ['name', 'age', 'gender']
const filename = '数据表格'
export_json_to_excel(tHeader, data, filterVal, filename)
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
}
}
</script>
```
在这个示例中,我们使用了一个名为 `export_json_to_excel` 的函数,它来自于 `Export2Excel.js` 文件,这个文件可以在 GitHub 上找到。这个函数接收四个参数:表头、数据、过滤器和文件名。我们可以使用 `formatJson` 方法来格式化数据,然后将其传递给 `export_json_to_excel` 函数,最终生成一个 .xlsx 文件。
希望这个示例对你有所帮助!
阅读全文