vue 导出表格数据

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>