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后,日期时间可能会出现格式不正确,显示为“######”,我暂时是在前面拼接了空格,如有大神有更优方案,请指出,感谢啦~~

更多推荐