vue + element 表格数据导出为excel表格

由于业务内容的需要，我们有时候需要将表格中的数据做导出，生成一个excel表格，以下操作主要实现将element中的table数据生成一个excel表格并做下载操作。

效果图如下：

 点击图中导出按钮时，将表格中的数据导出为一个excel文件并下载。

如下

 

 操作步骤如下：

1.下载相应的依赖 （命令如下）

npm install --save xlsx file-saver

2.下载完成后引入相应的插件

        1.import FileSaver from "file-saver";

        2.import * as XLSX from "xlsx";

3.在相关页面引入代码后定义方法

exportExcel() {
    //转换成excel时，使用原始的格式
    var xlsxParam = { raw: true };
    let fix = document.querySelector(".el-table__fixed");
    let wb;
    //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
	if (fix) {
		wb = XLSX.utils.table_to_book(
		document.querySelector("#tableId").removeChild(fix),xlsxParam);
		document.querySelector("#tableId").appendChild(fix);
	} else {
		wb = XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam);
	}
	var wbout = XLSX.write(wb, {
		bookType: "xlsx",
		bookSST: true,
		type: "array",
	});
	try {
		FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"导出详情单.xlsx"); 
	} catch (e) {
		if (typeof console !== "undefined") console.log(e, wbout);
		}
	return wbout;
},

4.给el-table中定义一个id

<el-table
	:data="tableData"
	id="tableId"
	style="width: 100%">
</el-table>

步骤基本完成，运行项目后点击导出按钮便可实现表格数据下载导出为excel表。

完整代码如下

<template>
	<div class="administrativeCase-container">
		<div class="content-box">
			<div class="box-btn">
				<div class="btn">
					<div>
						<el-button type="primary">导入</el-button>
						<el-button @click="exportExcel()">导出</el-button>
					</div>
				</div>
			</div>
			<div class="box-content">
				<el-table
				      :data="tableData"
					  id="tableId"
				      style="width: 100%">
				      <el-table-column
				        prop="date"
				        label="日期"
						fixed
				        width="180">
				      </el-table-column>
				      <el-table-column
				        prop="name"
				        label="姓名"
						fixed
				        width="180">
				      </el-table-column>
				      <el-table-column
				        prop="address"
				        label="地址">
				      </el-table-column>
					  <el-table-column
					    prop="date"
					    label="日期"
					  						
					    width="180">
					  </el-table-column>
					  <el-table-column
					    prop="name"
					    label="姓名"
					    width="180">
					  </el-table-column>
					  <el-table-column
					    prop="address"
					    label="地址">
					  </el-table-column>
					  <el-table-column
					    prop="date"
					    label="日期"
					  						
					    width="180">
					  </el-table-column>
					  <el-table-column
					    prop="name"
					    label="姓名"
					    width="180">
					  </el-table-column>
					  <el-table-column
					    prop="address"
					    label="地址">
					  </el-table-column>
				 </el-table>
			</div>
		</div>
	</div>
</template>

<script>
	import FileSaver from "file-saver";
	import * as XLSX from "xlsx";
	export default {
		data () {
			return {
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}],
			}
		},
		methods:{
			// 导出
			exportExcel() {
                //转换成excel时，使用原始的格式
				var xlsxParam = { raw: true };
				let fix = document.querySelector(".el-table__fixed");
				let wb;
                //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
				if (fix) {
				  wb = XLSX.utils.table_to_book(
				  document.querySelector("#tableId").removeChild(fix),xlsxParam
				  );
				  document.querySelector("#tableId").appendChild(fix);
				} else {
				  wb = XLSX.utils.table_to_book(document.querySelector("#tableId"),xlsxParam);
				}
				var wbout = XLSX.write(wb, {
				bookType: "xlsx",
				bookSST: true,
				type: "array",
				});
				try {
				FileSaver.saveAs(
					new Blob([wbout], { type: "application/octet-stream" }),
					"导出详情单.xlsx"
				); //文件名
				} catch (e) {
				if (typeof console !== "undefined") console.log(e, wbout);
				}
				return wbout;
			},
		}
	}
</script>

<style>

</style>