首页vue elementui表格导出excel案例

vue elementui表格导出excel案例

时间: 2023-07-09 17:48:55 浏览: 185

好的，我可以为您提供一个简单的案例。首先，您需要安装 `xlsx` 和 `file-saver` 两个库。您可以使用以下命令进行安装： ``` npm install xlsx file-saver --save ``` 接下来，您需要在您的组件中引入这两个库： ```javascript import XLSX from 'xlsx'; import FileSaver from 'file-saver'; ``` 然后，在您的模板中添加一个按钮，当用户点击该按钮时，将会触发导出操作： ```html <el-button type="primary" @click="exportExcel">导出Excel</el-button> ``` 最后，在您的组件中添加一个 `exportExcel` 方法，用于将表格数据导出为 Excel 文件： ```javascript exportExcel() { // 获取表格数据 const tableData = this.$refs.table.$el.querySelector('table') .outerHTML; // 创建一个工作簿对象 const workbook = XLSX.utils.book_new(); // 将表格数据转换为 worksheet 对象 const worksheet = XLSX.utils.table_to_sheet(tableData); // 将 worksheet 添加到工作簿中 XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 将工作簿对象转换为二进制流 const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); // 创建一个 Blob 对象，并保存为 Excel 文件 FileSaver.saveAs( new Blob([wbout], { type: 'application/octet-stream' }), 'table.xlsx' ); } ``` 这样，当用户点击导出 Excel 按钮时，表格数据将会被导出为一个名为 `table.xlsx` 的 Excel 文件。

阅读全文