Vue+element项目实现列表数据导出excel文件

描述：

点击【导出】按钮，导出当前列表查询出来的所有数据到excel表格

功能实现：

1.导入xlsx库

       将整个xlsx库导入到当前的JavaScript文件中，并将其重命名为XLSX。这样，就可以使用XLSX这个变量来访问库中的所有功能和模块了

import * as XLSX from 'xlsx';

2.在【导出】按钮上绑定点击事件

<el-button type="primary" @click="exportToExcel()">导出</el-button>

3.导出当前查询到的数据到excel表格

        // 点击【导出】按钮，导出当前列表查询出来的所有数据到excel表格
        exportToExcel() {
            const data = this.tableData;
            const fileName = "exported_data.xlsx";

            const worksheet = XLSX.utils.json_to_sheet(data);
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

            const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
            const blob = new Blob([excelBuffer], { type: "application/octet-stream" });

            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.download = fileName;
            a.click();
            URL.revokeObjectURL(url);
        },

以下是对方法内容的解释：

1. const data = this.tableData; 这行代码获取当前组件的tableData属性，通常这是一个包含数据的数组，并将这个数组赋值给data变量。

2. const fileName = "exported_data.xlsx"; 这行代码定义了导出文件的名称，这里设置为"exported_data.xlsx"。

3. const worksheet = XLSX.utils.json_to_sheet(data); 这行代码使用XLSX.utils.json_to_sheet方法将data数组转换为Excel工作表。json_to_sheet函数接受一个JSON数组，并将其转换为一个工作表对象。

4. const workbook = XLSX.utils.book_new(); 这行代码创建一个新的工作簿对象，workbook是Excel文件的主体。

5. XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); 这行代码将之前创建的工作表worksheet添加到工作簿workbook中，并将其命名为"Sheet1"。

6. const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" }); 这行代码使用XLSX.write方法将工作簿workbook写入到一个ArrayBuffer对象中。bookType参数设置为"xlsx"表示导出为.xlsx格式，type参数设置为"array"表示返回一个ArrayBuffer数组。

7. const blob = new Blob([excelBuffer], { type: "application/octet-stream" }); 这行代码将ArrayBuffer数组转换为一个Blob对象，Blob代表一个不可变的类文件对象。这里设置了Blob的MIME类型为"application/octet-stream"，表示二进制流文件。

8. const url = URL.createObjectURL(blob); 这行代码使用URL.createObjectURL方法创建了一个URL对象，该对象指向blob文件。这个URL是临时的，只在当前页面会话中有效。

9. const a = document.createElement("a"); 这行代码创建了一个新的<a>元素。

10. a.href = url; 这行代码将新创建的<a>元素的href属性设置为上面创建的URL。

11. a.download = fileName; 这行代码设置下载文件的名称，即"exported_data.xlsx"。

12. a.click(); 这行代码模拟了一个点击事件，触发下载操作。当用户点击这个虚拟的链接时，浏览器会将文件下载到用户的本地。

13. URL.revokeObjectURL(url); 这行代码使用URL.revokeObjectURL方法释放了之前创建的URL对象，这是一个最佳实践，可以释放浏览器内存资源。

总的来说，这段代码实现了将一个数据数组导出为Excel文件的功能，并通过模拟点击事件触发下载操作，使得用户可以保存Excel文件到本地。