原生html 使用vue elementui table导出Excel

哆啦A梦是一只狸猫

已于 2022-09-09 16:03:07 修改

阅读量1.4k

点赞数

分类专栏：原生html使用vuejs 文章标签： vue.js elementui html

于 2022-06-30 16:49:21 首次发布

本文链接：https://blog.csdn.net/qq_40615333/article/details/125541023

版权

原生html使用vuejs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

代码示例
前端页面截图
导出结果

现在各大浏览器基本都支持data协议，所以我们可以使用该协议去将网页中的table转化为excel下载下来就行（合并行列也能导出成功）。
下面直接上代码。

代码示例

<head runat="server">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="format-detection" content="telephone=no" />
	<title>用户地址信息</title>
	<script src="../Common/Vue+ElementUi/vue.js"></script>
	<script src="../Common/Vue+ElementUi/vue2.6.11.js"></script>
	<link rel="stylesheet" href="../Common/Vue+ElementUi/element-ui.css">
	<script src="../Common/Vue+ElementUi/element-ui.js"></script>
	<script src="../JS/common.js"></script>
</head>
<body leftMargin="0" topMargin="0">
<div id="app">
	<el-row style="margin:5px 5px 5px 20px;">
   		<el-col :span="8">
			<el-button @click="exportToExcel">导出Excel</el-button>
			<a ref="downHref" download="用户地址信息.xls" :href="downHref" style="display:none"></a>
		</el-col>
	</el-row>
	<el-table ref="tableData" :data="tableData" style="width: 100%" border height="100%"  :span-method="objectSpanMethod">
		<el-table-column label="用户地址信息" align="center">
			<el-table-column prop="Province" label="省份"></el-table-column>
				<el-table-column label="地址" align="center">
					<el-table-column prop="City" label="市"></el-table-column>
					<el-table-column prop="Area" label="县"></el-table-column>
					<el-table-column prop="Name" label="姓名"></el-table-column>
					<el-table-column prop="Address" label="详细地址"></el-table-column>
				</el-table-column>
		  </el-table-column>
		</el-table-column>
	</el-table>
</div>
</body>

<script>
    // 该vue对象，绑定了页面中id是app的那个div
    new Vue(
        {
            el: '#app', //element
            data: {
            	tableData:[],	//表格数据
				downHref:"",
				columnOrder:[	//列字段排序，用于合并行数和列数
					"Province",
					"City",
					"Area",
					"Name",
					"Address",
				]
            },
            mounted(){
				this.Init();
            },
            methods:{
				//初始化
            	Init(){
					const that = this;
            		that.tableData = [
						{
							"Province":"广东省",
							"City":"佛山市",
							"Area":"禅城区",
							"Name":"张三",
							"Address":"测试地址1"
						},{
							"Province":"广东省",
							"City":"佛山市",
							"Area":"南海区",
							"Name":"张三",
							"Address":"测试地址2"
						},{
							"Province":"广东省",
							"City":"广州市",
							"Area":"白云区",
							"Name":"李四",
							"Address":"测试地址3"
						},{
							"Province":"北京市",
							"City":"北京市",
							"Area":"顺义区",
							"Name":"王五",
							"Address":"测试地址4"
						},
					];
            	},
				//合并行数和列数
				objectSpanMethod({ row, column, rowIndex, columnIndex }){					
					const that = this;
					let obj = {
						rowspan:1,
						colspan:1
					}
					obj = that.getRowSpanQty(row,rowIndex,columnIndex,obj);
					obj = that.getColumnSpanQty(row,rowIndex,columnIndex,obj);
					return obj;
				},
				//获取合并列数
				getRowSpanQty(row,rowIndex,columnIndex,obj){
					const that = this;
					if(rowIndex == 0){
						//当第一行，就循环判断一下行是否存在相同内容，是则行数+1
						let isNeedNextRow = true;	//是否继续循环下一行同一个单元格
						for(let i =0;i < that.tableData.length;i++){
							if(rowIndex != i && isNeedNextRow != false){
								let data = that.tableData[i];
								if(data[this.columnOrder[columnIndex]] == row[this.columnOrder[columnIndex]]){
									obj.rowspan++;
									isNeedNextRow = true;
								}else{
									isNeedNextRow = false;
								}
							}
						}
					}else{
						let data = that.tableData[rowIndex - 1];
						if(data[this.columnOrder[columnIndex]] == row[this.columnOrder[columnIndex]]){
							//当不是第一行，则判断当前单元格与上一行的当前单元格是否一致，一致则不显示
							obj.rowspan = 0;
							obj.colspan = 0;
						}
					}
					return obj;
				},
				//获取合并列数
				getColumnSpanQty(row,rowIndex,columnIndex,obj){
					const that = this;
					let isNeedNextColumn = true;	//是否继续循环当前行下一个单元格
					for(let i = columnIndex;i < this.columnOrder.length;i++){
						if(isNeedNextColumn != false){
							let columnName = this.columnOrder[i+1];
							if(row[this.columnOrder[columnIndex]] == row[columnName]){
								//当前行的单元格=当前行的下一个单元格，则列数+1
								obj.colspan++;
								isNeedNextColumn = true;
							}else{
								isNeedNextColumn = false;
							}
						}
					}

					if(row[this.columnOrder[columnIndex]] == row[this.columnOrder[columnIndex-1]]){
						//当当前行的当前单元格=当前行的上一个单元格，则0不显示
						obj.rowspan = 0;
						obj.colspan= 0;
					}
					return obj;
				},
				//导出Excel
				exportToExcel(){
					const that = this;
					let excelContent = this.$refs.tableData.$el.innerHTML;
					var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
					excelFile += "<head>";
					excelFile += "<!--[if gte mso 9]>";
					excelFile += "<xml>";
					excelFile += "<x:ExcelWorkbook>";
					excelFile += "<x:ExcelWorksheets>";
					excelFile += "<x:ExcelWorksheet>";
					excelFile += "<x:Name>";
					excelFile += "{worksheet}";
					excelFile += "</x:Name>";
					excelFile += "<x:WorksheetOptions>";
					excelFile += "<x:DisplayGridlines/>";
					excelFile += "</x:WorksheetOptions>";
					excelFile += "</x:ExcelWorksheet>";
					excelFile += "</x:ExcelWorksheets>";
					excelFile += "</x:ExcelWorkbook>";
					excelFile += "</xml>";
					excelFile += "<![endif]-->";

					//设置样式
					excelFile += "<style>";
					excelFile += "td{border: .5pt solid;}";
					excelFile += "</style>";
					excelFile += `<meta http-equiv="Content-Type" content="text/html; charset=utf-8">`;//使用utf-8编码规则
					excelFile += "</head>";
					excelFile += "<body>";
					excelFile += excelContent;
					excelFile += "</body>";
					excelFile += "</html>";
					var link ="data:application/vnd.ms-excel;base64," + window.btoa(unescape(encodeURIComponent(excelFile)));
					that.downHref = link;

					setTimeout(function(){
						that.$refs.downHref.click();
					},100)
				}
            }
        }
    );