1.EasyUI表格导出到Excel
html:
<span class="export" @click="exportToExcel">导出Excel</span>
<div id="table" class="easyui-tabs tabBox">
<div title="统计" selected="true">
<table class="easyui-datagrid" style="width:auto;" id='statistics' data-options="
autoRowHeight: false,
singleSelect: true,
rownumbers: true,
showFooter: true,
footer:'#ft'">
</table>
<div id="statistics_pp"></div>
</div>
</div>
</div>
js:
exportToExcel: function() {
var tab = $("#table").tabs("getSelected"); //获取选中的标签页面板
var tabObj = tab.panel('options').tab; //相应的标签页对象
var tabTitle = tabObj[0].innerText;
$('#statistics').datagrid('toExcel', tabTitle + '.xls');
}
2.ElementUI表格导出到Excel
html:
<el-table ref="table" :data="statistics">
<el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
<el-table-column align="center" prop="depart_name" label="所属部门" width="220"></el-table-column>
<el-table-column align="center" prop="locale_name" label="现场名称" width="220"></el-table-column>
<el-table-column align="center" prop="cnt_total" label="监测仪数量" width="120"></el-table-column>
</el-table>
<el-button type="primary" @click="exportExcel">导出Excel</el-button>
js:
exportExcel() {
const tjColumns = [{
field: "depart_name",
title: "所属部门"
},{
field: "cnt_total"
title: "DTU数量"
}]
const list = [{
attach_id: 1,
cnt_total: 1,
depart_name: "迁安市"
}]
import("@/vendor/Export2Excel").then(excel => {
// 标题
const tHeader = tjColumns[0].map(item => {
return item.title;
});
// 标题对应的属性
const filterVal = tjColumns[0].map(item => {
return item.field;
});
const data = this.formatJson(filterVal, list);
excel.export_json_to_excel({
header: tHeader,
data,
filename: "统计报表"
});
});
},
formatJson(filterVal, jsonData) {
return jsonData.map(v =>
filterVal.map(j => {
return v[j];
})
);
},
3.自定义表格导出到Excel
导出表格数组中的部分属性:
html:
<div class="export" @click="exportChuTHis(chuTHisTh, chuTHis)">导出Excel</div>
<!-- 表头 -->
<ul class="traceBody_th">
<li v-for="item in chuTHisTh">{{item}}</li>
</ul>
<!-- 表格内容 -->
<ul class="traceBody_tr">
<li v-for="it in chuTHis">
<span>{{it.ct_no}}</span>
<span>{{it.ct_fish_name}}</span>
<span>{{it.ct_oper}}</span>
<span>{{it.ct_tm}}</span>
<span>{{it.ct_cnt}}</span>
<span>{{it.ct_last_cnt}}</span>
</li>
</ul>
js:
exportChuTHis:function(){
let excelList = [];
let bodyList = [{
ct_no: 1,
ct_fish_name: "鲫鱼",
ct_oper: "小土豆",
ct_tm: "2022-11-16 14:20:20",
ct_cnt: 10,
ct_last_cnt: 200,
ct_wgt: 20,,
remark: "备注",
qr_code: ""
}];
let chuTHisTh = ["出塘批次", "出塘鱼种", "出塘人员", "出塘时间", "出塘数量", "剩余数量"];
for (var i = 0; i < chuTHisTh.length; i++) {
excelList.push(chuTHisTh[i] + ",");
}
excelList.push('\n')
for (var i = 0; i < bodyList.length; i++) {
excelList.push(bodyList[i].ct_no + ",")
excelList.push(bodyList[i].ct_fish_name + ",")
excelList.push(bodyList[i].ct_oper + ",")
excelList.push(" " + bodyList[i].ct_tm + ",")//在日期时间前拼接了空格,防止导出到Excel后格式不正确
excelList.push(bodyList[i].ct_cnt + ",")
excelList.push(bodyList[i].ct_last_cnt + ",")
excelList.push("\n");
}
var merged = excelList.join("");
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(merged);
let link = document.createElement("a");
link.href = uri;
link.download = "出塘历史数据表.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
这种情况下导出到Excel后,日期时间可能会出现格式不正确,显示为“######”,我暂时是在前面拼接了空格,如有大神有更优方案,请指出,感谢啦~~