vue3导出Excel
时间: 2023-09-15 12:17:56 浏览: 34
要在 Vue 3 中导出 Excel 文件,可以使用 js-xlsx 库。以下是一个简单的示例:
安装 js-xlsx:
```bash
npm install xlsx
```
在组件中引入:
```javascript
import XLSX from 'xlsx';
```
创建一个方法来生成 Excel 文件:
```javascript
exportExcel() {
const data = [
['Name', 'Age'],
['John', 18],
['Mary', 21]
];
const sheet = XLSX.utils.aoa_to_sheet(data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1');
XLSX.writeFile(workbook, 'example.xlsx');
}
```
在模板中添加一个按钮或链接,当用户点击时调用 `exportExcel` 方法:
```html
<button @click="exportExcel">Export Excel</button>
```
在这个例子中,我们创建了一个包含名称和年龄的数据数组。我们将数据转换为工作表,创建一个工作簿,并将工作表添加到工作簿中。最后,我们使用 `writeFile` 方法将工作簿写入名为 example.xlsx 的文件中。
请注意,这只是一个简单的示例。如果您需要更复杂的 Excel 文件,您可以使用 js-xlsx 库提供的其他功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)