首页vue3导出excel表格

vue3导出excel表格

时间: 2023-09-15 22:17:56 浏览: 223

在Vue3中，可以使用第三方库`xlsx`来导出Excel表格。首先，需要安装`xlsx`库： ``` npm install xlsx --save ``` 然后，在需要导出Excel表格的组件中引入`xlsx`库： ``` import XLSX from 'xlsx'; ``` 接下来，可以创建一个导出Excel表格的方法： ``` exportExcel() { const data = [ ['姓名', '年龄', '性别'], ['张三', 18, '男'], ['李四', 20, '女'], ['王五', 22, '男'] ]; const worksheet = XLSX.utils.aoa_to_sheet(data); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); XLSX.writeFile(workbook, 'data.xlsx'); } ``` 上面的代码创建了一个包含数据的二维数组`data`，然后使用`XLSX.utils.aoa_to_sheet`方法将数据转换成工作表；接着，创建一个新的工作簿，将工作表添加到工作簿中，最后使用`XLSX.writeFile`方法将工作簿保存成Excel文件。最后，在组件模板中添加一个按钮，调用导出Excel表格的方法： ``` <template> <div> <button @click="exportExcel">导出Excel表格</button> </div> </template> ```

阅读全文