前端 vue 项目中导出 table 为 excel 表格

背景介绍:
使用 vue 框架以及vue的其他生态系统,组件库使用的是 element-ui

首先要安装两个包:XLSX,file-saver

npm install --save xlsx file-saver

现在有一个按钮,和一个表格,点击按钮发生导出表格的事件。

// template
<el-botton @click="export">export</el-button>
<el-table id="table">...</el-table>

// script
import XLSX from 'xlsx'
import FileSaver from 'file-saver'
...
methods:{
	export() {
		let table = document.getElementById('table');
		let workboodout = XLSX.write(workbook, { bookType: 'xlsx', bookSST: true, type: 'array'});
      	try {
        	FileSaver.saveAs(new Blob([workboodout], { type: 'application/octet-stream'}), 'table.xlsx');
        	// table.xlsx 为导出的文件名,可自定义
      	} catch (e) {
        	console.log(e, workboodout);
      	}
      	return workboodout;
	}
}

猜你喜欢

转载自blog.csdn.net/romeo12334/article/details/88820962