//原文地址：https://blog.csdn.net/qq_20349639/article/details/83827317
原文的json结构我感觉不适合我用，改了一下。并加入测试页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入jq -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 引入Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入elementui样式 -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<!-- 引入elementui组件库 -->
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-container>
<el-header class="header outerLay-border" height="450px" style="background-color: aqua">
<el-row class="select-row" :gutter="20" style="margin-top: 20px;">
<el-col class="select-lable" :span="3"><div>excel标题</div></el-col>
<el-col :span="5"><el-input v-model="excelTitle"></el-input></el-col>
</el-row>
<br></br>
<el-row class="select-row" :gutter="20">
<el-col class="select-lable" :span="3"><div>第一列标题</div></el-col>
<el-col :span="5"><el-input v-model="title.one"></el-input></el-col>
<el-col class="select-lable" :span="3"><div>第二列标题</div></el-col>
<el-col :span="5"><el-input v-model="title.two"></el-input></el-col>
<el-col class="select-lable" :span="3"><div>第三列标题</div></el-col>
<el-col :span="5"><el-input v-model="title.three"></el-input></el-col>
</el-row>
<br></br>
<el-row class="select-row" :gutter="20">
<el-col class="select-lable" :span="3"><div>第一列</div></el-col>
<el-col :span="5"><el-input v-model="row1.one"></el-input></el-col>
<el-col class="select-lable" :span="3"><div>第二列</div></el-col>
<el-col :span="5"><el-input v-model="row1.two"></el-input></el-col>
<el-col class="select-lable" :span="3"><div>第三列</div></el-col>
<el-col :span="5"><el-input v-model="row1.three"></el-input></el-col>
</el-row>
<el-row class="select-row" :gutter="20">
<el-col class="select-lable" :span="3"><div>第一列</div></el-col>
<el-col :span="5"><el-input v-model="row2.one"></el-input></el-col>
<el-col class="select-lable" :span="3"><div>第二列</div></el-col>
<el-col :span="5"><el-input v-model="row2.two"></el-input></el-col>
<el-col class="select-lable" :span="3"><div>第三列</div></el-col>
<el-col :span="5"><el-input v-model="row2.three"></el-input></el-col>
</el-row>
<el-row type="flex" justify="space-around" style="margin-top: 50px; padding:0 200px">
<el-button type="primary" @click="btn_excel_export">导出</el-button>
</el-row>
</el-header>
</el-container>
</div>
<script>
new Vue({
el: '#app',
data: {
// 输入框数据
excelTitle:"测试表",
title:{
one:"时间",
two:"地点",
three:"人物"
},
row1:{
one:"早上",
two:"北京",
three:"a1"
},
row2:{
one:"晚上",
two:"上海",
three:"a2"
},
//
},
methods: {
// 按钮点击函数
btn_excel_export(){
var rows = [];
rows.push(this.row1);
rows.push(this.row2);
//导出
this.toExcel(this.excelTitle, this.title, rows);
},
// FileName 生成的Excel文件名称
// ShowLabel 生成的Excel文件列标题
// JSONData 生成的Excel文件内容
// ! json对象属性的遍历，不保证有序
toExcel(FileName, ShowLabel, JSONData){
//先转化json
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var excel = '<table>';
//设置表头
var row = "<tr align='left'>";//设置Excel的左居中
for(var k in ShowLabel){
row += "<td>" + ShowLabel[k] + '</td>';
}
//换行
excel += row + "</tr>";
// 设置数据
for (var i = 0; i < arrData.length; i++) {
var rowData = "<tr align='left'>";
// 这部分是行数据
var rowObj = arrData[i];
for(var k in rowObj){
//vnd.ms-excel.numberformat:@ 将一长串数字原样输出，不使用科学计数法
rowData += "<td style='vnd.ms-excel.numberformat:@'>" + (rowObj[k] == null ? "" : rowObj[k]) + "</td>";
}
//
excel += rowData + "</tr>";
}
excel += "</table>";
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 += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
excelFile += '; charset=UTF-8">';
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 += "</head>";
excelFile += "<body>";
excelFile += excel;
excelFile += "</body>";
excelFile += "</html>";
var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = FileName + ".xls";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
});
</script>
<style>
.outerLay-border{
border: 2px;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.select-row{
display: flex;
align-items: center;
}
.select-lable {
text-align:right;
}
body {
width: 70%;
margin-left: 15%;
}
.el-row {
margin-bottom: 20px;
}
.el-col {
border-radius: 4px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
</body>
</html>