Vue项目中将el-table表格中的数据导出为Excel文件

将el-table表格中的数据导出为Excel文件

安装依赖模板

npm i —S xlsx file-saver

在放置需要导出功能的组件中引入模块

import FileSaver from 'file-saver'

import XLSX from 'xlsx'

若打印XLSX，输出为undefined，导入失败（xlsx版本不同）；就在method中使用 require()导入

const XLSX = require('xlsx')

给需要导出的el-table表格组件上加一个id；
如exportTable，对应下面的exportToExcel方法中的 document.querySelector(’#exportTable’)获取到该el-table的dom节点

导出方法

method中写导出事件 exportToExcel()

// 表格数据写入excel，并导出为Excel文件
exportToExcel(){
  const XLSX = require('xlsx')
  console.log('XLSX',XLSX,FileSaver)
  // 使用 this.$nextTick 是在dom元素都渲染完成之后再执行
  this.$nextTick(function () {
	// 设置导出的内容是否只做解析，不进行格式转换     false：要解析， true:不解析
	const xlsxParam = { raw: true } 
	const wb = XLSX.utils.table_to_book(document.querySelector('#oIncomTable'), xlsxParam)
	// 导出excel文件名
	let fileName = '营业收入' + new Date().getTime() + '.xlsx'
	
	const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
	try {
	  // 下载保存文件
	  FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName)
	} catch (e) {
	  if (typeof console !== 'undefined') {
		console.log(e, wbout)
	  }
	}
	return wbout
  })
},

调用

<el-button type="primary" @click="exportToExcel"> 导出 </el-button>

导出成功：

打开：

若表格分页生成的时候只能生成当前页的excel，在执行 exportToExcel() 方法的时候，先把表格的页码改为最大