vue xlsx 数据导出

1、安装xlsx插件

C/C++ Code复制内容到剪贴板

1. npm install xlsx -S  
2. 
   
3. ## yarn  
4. yarn add xlsx  

 

2、vue2与vue3的引用方式

值得注意的是再引用xlsx的时候vue3和vue2写法不同

vue2：import XLSX from ‘xlsx’

vue3：import * as XLSX from ‘xlsx’

 

3、导出

JavaScript Code复制内容到剪贴板

1. export default {  
2.   data() {  
3.     return {  
4.       tableData: [  
5.         { name: '张三', age: 18, gender: '男' },  
6.         { name: '李四', age: 20, gender: '女' },  
7.         { name: '王五', age: 22, gender: '男' }  
8.       ]  
9.     }  
10.   },  
11.   methods: {  
12.     exportData() {  
13.       const headers = ['姓名', '年龄', '性别']  
14.       const data = this.tableData.map(item => [item.name, item.age, item.gender])  
15.       const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data])  
16.       const workbook = XLSX.utils.book_new()  
17.       XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')  
18.       XLSX.writeFile(workbook, 'data.xlsx')  
19.     }  
20.   }  
21. }