利用uniapp实现表格导出功能

// main.js

import XLSX from 'xlsx'

// 将XLSX实例绑定到Vue的原型上，便于在全局访问
Vue.prototype.$xlsx = XLSX

<template>
  <view>
    <uni-list>
      <uni-grid :col="headers.length">
        <uni-grid-item v-for="header in headers" :key="header">{{header}}</uni-grid-item>
      </uni-grid>
    </uni-list>
    
    <uni-list>
      <uni-grid :col="headers.length">
        <uni-grid-item v-for="(row, rowIndex) in data" :key="rowIndex">{{row}}</uni-grid-item>
      </uni-grid>
    </uni-list>
    
    <uni-button @click="exportTable">导出表格</uni-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      headers: ['姓名', '年龄', '性别'],
      data: [
        ['张三', 20, '男'],
        ['李四', 25, '女'],
        ['王五', 22, '男'],
      ],
    };
  },
  
  methods: {
    exportTable() {
      // 准备数据
      const sheetData = [this.headers, ...this.data];
      
      // 创建工作薄对象
      const workbook = this.$xlsx.utils.book_new();
      
      // 创建工作表对象
      const worksheet = this.$xlsx.utils.aoa_to_sheet(sheetData);
      
      // 将工作表添加到工作薄中
      this.$xlsx.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      
      // 导出Excel文件
      const xlsContent = this.$xlsx.write(workbook, { type: 'binary' });
      const blobData = new Blob([this.$xlsx.writeFile(workbook, { bookType: 'xlsx', type: 'binary' })], { type: 'application/octet-stream' });
      const downloadUrl = URL.createObjectURL(blobData);
      const link = document.createElement('a');
      link.href = downloadUrl;
      link.download = 'table.xlsx';
      link.click();
    },
  },
};
</script>

<template>
  <view>
    <table></table>
  </view>
</template>

<script>
import Table from '@/components/Table.vue';

export default {
  components: {
    Table,
  },
};
</script>