1.先搞安装xlsx
npm i xlsx --save-dev
2.接下我们就要处理数据了
<template>
<view>
<button @click="exportData">导出</button>
<view v-for="item in tableTitle">
{
{ item.title }}
</view>
<view v-for="item in tableList">
<view>{
{ item.name }}</view>
<view>{
{ item.sex }}</view>
<view>{
{ item.age }}</view>
</view>
</view>
</template>
<script>
import XLSX from 'xlsx'
export default {
data() {
return {
tableTitle: [
{
title: '姓名', falg: '1' },
{
title: '性别', falg: '1' },
{
title: '年龄', falg: '1' },
],
tableList: [
{
name: '张三',
sex: '女',
age: '26',
},
{
name: '张李四',
sex: '男',
age: '26',
},
{
name: '王武',
sex: '男',
age: '29',
},
],
}
},
methods: {
// 处理下数据
transData(columns, tableList) {
const tableHead = tableTitle.map((item) => item.title)
const tableBody = tableList.map((item) => [item.name, item.sex, item.age])
return [tableHead, ...tableBody]
},
// 数据导出
exportData() {
const tableData = this.transData(this.tableTitle, this.tableList)
// 将一组 JS 数据数组转换为工作表
const ws = XLSX.utils.aoa_to_sheet(tableData)
// 创建 workbook
const wb = XLSX.utils.book_new()
// 将 工作表 添加到 workbook
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
// 将 workbook 写入文件
XLSX.writeFile(wb, 'table.xlsx')
},
},
}
</script>