利用uniapp实现表格导出功能

// main.jsimport 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>导出表格</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>