前端vue项目实现批量导出excel

1、安装

npm install xlsx file-saver --save 

2、在需要用到的页面引入

import * as XLSX from 'xlsx'

3、使用

页面效果：

html代码：

js代码：

// 导出exlce
		exportFile() {
            //判断当前是否勾选打印数据，不然会只打印出来一个表头，毫无意义！！！
			if(this.selectionList.length <= 0){ 
				this.$message({
                    message: '请选择导出数据！',
                    type: 'warning'
                });
				return
			}
			// 表格表头
			let tableDatas = [
				['','工单ID', '公司名称', '姓名', '手机号', '公司地址', '价格',  '接单人', '下单时间']
			]
			this.selectionList.forEach((item, index) => {
				let rowData = []
                //表格数据 把数值类型改为字符串是因为导出来的Excel表字符串靠左，数值靠右，居中方式不一致，如果不讲究细节也可以不转换类型
				rowData = [
					String(index+1),
					item.id.toString(),
					item.corporateName,
					item.contacts,
					item.phone,
					item.villagesName,
					item.payAmount.toString(),
					item.name,
					item.createTime
				]
				tableDatas.push(rowData)
			})
			let workSheet = XLSX.utils.aoa_to_sheet(tableDatas)
			let bookNew = XLSX.utils.book_new()
			XLSX.utils.book_append_sheet(bookNew, workSheet, '即时工单') // 工作簿名称
			let name = '即时工单.xlsx'
			XLSX.writeFile(bookNew, name) //保存的文件名
		},

4、结果：

勾选数据以后点击批量导出按钮，右上角的网页下载就会自动下载Excel。