58.请使用vue3+vite+typescript+element-plus+setup语法糖，使用xlsx和file-saver实现保存excel功能。我的el-table表有分页数据。导出的ex

 1 <template>
 2   <div>
 3     <el-table
 4       :data="mergedTableData"
 5       border
 6       stripe
 7     >
 8       <!-- 表头 -->
 9       <el-table-column
10         prop="date"
11         label="Date"
12       ></el-table-column>
13       <el-table-column
14         prop="name"
15         label="Name"
16       ></el-table-column>
17       <el-table-column
18         prop="address"
19         label="Address"
20       ></el-table-column>
21     </el-table>
22 
23     <el-button @click="exportExcel">导出 Excel</el-button>
24   </div>
25 </template>
26 
27 <script setup lang="ts">
28 import { ref, onMounted } from 'vue';
29 import XLSX from 'xlsx';
30 import { saveAs } from 'file-saver';
31 
32 const pageSize = 2;
33 const totalItems = 4;
34 const tableData = ref([]);
35 const mergedTableData = ref([]);
36 
37 onMounted(() => {
38   fetchData();
39 });
40 
41 // 模拟异步获取分页数据
42 function fetchData() {
43   setTimeout(() => {
44     const data = [
45       {
46         date: '2016-05-03',
47         name: 'Tom',
48         address: 'No. 189, Grove St, Los Angeles',
49       },
50       {
51         date: '2016-05-02',
52         name: 'Tom',
53         address: 'No. 189, Grove St, Los Angeles',
54       },
55       {
56         date: '2016-05-04',
57         name: 'Tom',
58         address: 'No. 189, Grove St, Los Angeles',
59       },
60       {
61         date: '2016-05-01',
62         name: 'Tom',
63         address: 'No. 189, Grove St, Los Angeles',
64       },
65     ];
66 
67     tableData.value = data; // 存储原始数据
68 
69     const mergedData = [];
70     const totalPages = Math.ceil(data.length / pageSize);
71     for (let page = 1; page <= totalPages; page++) {
72       const start = (page - 1) * pageSize;
73       const end = start + pageSize;
74       mergedData.push(...data.slice(start, end));
75     }
76 
77     mergedTableData.value = mergedData;
78   }, 500);
79 }
80 
81 // 导出 Excel
82 function exportExcel() {
83   const workbook = XLSX.utils.book_new();
84   const worksheet = XLSX.utils.json_to_sheet(mergedTableData.value);
85   XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet 1');
86   const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
87   const excelData = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
88   saveAs(excelData, 'data.xlsx');
89 }
90 </script>

在上述代码中，我们做了以下修改：

1. 创建一个新的变量 mergedTableData，用于存储合并后的表格数据。
2. 在 fetchData 方法中，首先将原始数据存储到 tableData 中，然后根据每页大小将数据合并为 mergedTableData。
3. 在导出 Excel 时，使用 mergedTableData 作为源数据进行导出。

这样，当你点击 "导出 Excel" 按钮时，会将所有分页中的数据合并为一个表格，然后导出为 Excel 文件并自动下载。