前言
目前数据导出excel的大多结合后端,大多数原理无非poi,io流。但也不排除部分业务需要前端导出更为便捷。下面实战演示。
页面部分
由于框架原因,前端数据的展示为采用framaker模板+js+easyui,方法是通用的,这个不用担心。
<!--按钮-->
<a class="easyui-linkbutton export" data-options="iconCls:'fa fa-print'">导出数据</a>
<!--数据表格-->
<div data-options="region:'center',border:false" style="height: 150px;border-top: 1px solid #D3D3D3">
<table id="assume_param_dg"></table>
</div>
js部分(数据表格)
var dg = $("#assume_param_dg");
var searchFrom = $("#assume_param_search_from");
dg.datagrid({
url: '/actuary/assumeparam/assumeparam/list',
emptyMsg: "无参数信息",
idField: "id",
fit: true,
rownumbers: true,
fitColumns: true,
border: false,
pagination: true,
singleSelect: true,
pageSize: 20,
columns: [[{
field: 'policyYear',
title: '保单年度',
width: '10%',
align: 'center',
fixed: true,
formatter: function (val) {
if (val == '' || val == null) {
dg.datagrid('hideColumn', 'policyYear');
} else {
dg.datagrid('showColumn', 'policyYear');
return val;
}
}
}, {
field: 'policyMonth',
title: '保单月度',
width: '10%',
align: 'center',
fixed: true,
formatter: function (val) {
if (val == '' || val == null) {
dg.datagrid('hideColumn', 'policyMonth');
} else {
dg.datagrid('showColumn', 'policyMonth');
return val;
}
}
}, {
field: 'discountTable',
title: 'Discount Rate Tables',
width: '10%',
align: 'center',
fixed: true,
formatter: function (val) {
if (val == '' || val == null) {
dg.datagrid('hideColumn', 'discountTable');
} else {
dg.datagrid('showColumn', 'discountTable');
return val;
}
}
}]]
});
导出js
数据处理看个人情况,由于我这里是动态查询的结果,有数据的列显示,没有数据的列隐藏,所以获取的rows是所有列的数据,所以针对没有数据的列删除;如果不对json数据进行替换,它默认导出的表格头是json数据中的key。可以在得到json数据时,对表头处理。
searchFrom.on('click', 'a.export', function () {
// 获取选中行
var rows = dg.treegrid("getRows");
for (var i = 0; i < rows.length; i++) { //进行数据处理
if(rows[i].policyYear == null){
delete rows[i].policyYear;
}
if(rows[i].policyMonth == null){
delete rows[i].policyMonth;
}
if(rows[i].discountTable == null){
delete rows[i].discountTable;
}
//直接移除不要的字段
delete rows[i].id;
}
//转化为json对象
var data = JSON.stringify(rows);
//替换中文标题
var a = data.replace(/policyYear/g, "保单年度").replace(/policyMonth/g, "保单月度").replace(/discountTable/g, "Discount Rate Tables");
if (a == '')
return;
JSONToCSVConvertor(a, "", true);
});
//表格导出开始,将json对象导出为CSV文件
function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData)
: JSONData;
var CSV = '';
//Set Report title in first row or line
CSV += ReportTitle + '\r';
//This condition will generate the Label/Header
if (ShowLabel) {
var row = "";
//此循环将取出每列的标题
for ( var index in arrData[0]) {
//Now convert each value to string and comma-seprated
row += index + ',';
}
//这里row为json对象的各个字段名。若是需要将字段名转化为中文可在这里替换
row = row.slice(0, -1);
console.log(1);
console.log(row);
//append Label row with line break
CSV += row + '\r\n';
}
//1st loop is to extract each row
for (var i = 0; i < arrData.length; i++) {
var row = "";
//2nd loop will extract each column and convert it in string comma-seprated
for ( var index in arrData[i]) {
row += '"' + arrData[i][index] + '",';
}
row.slice(0, row.length - 1);
//add a line break after each row
CSV += row + '\r\n';
}
if (CSV == '') {
alert("Invalid data");
return;
}
//Generate a file name
var fileName = "导出参数值信息";
//this will remove the blank-spaces from the title and replace it with an underscore
fileName += ReportTitle.replace(/ /g, "_");
//Initialize file format you want csv or xls
var uri = 'data:text/csv;charset=utf-8,\ufeff' +encodeURI(CSV);
// Now the little tricky part.
// you can use either>> window.open(uri);
// but this will not work in some browsers
// or you will not get the correct file extension
//this trick will generate a temp <a /> tag
var link = document.createElement("a");
link.href = uri;
//set the visibility hidden so it will not effect on your web-layout
link.style = "visibility:hidden";
link.download = fileName + ".csv";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
效果展示图
导出的是csv格式文件,如果需要xls格式可能还得结合后端,为了演示方便,我这里只是写了部分字段,原理是一样的。
导出:
参考链接:https://blog.csdn.net/qq_31702121/article/details/81131769
https://www.cnblogs.com/kingdudu/p/4863980.html