WeX5导出Excel

我是小菜鸡 · 发表于 2017-1-17 10:18:45

本帖最后由我是小菜鸡于 2017-1-17 10:25 编辑

因为项目需要需要导出报表，在论坛上也没找到相关方法，网上找的都是使用js将table导出Excel的方法，对比了一下平台上的listtable还和js的table结构上有点区别，对于我这种小白来说还是有点困难的。后来忽然想到table绑定的一般都是baasData组件，而baasData可以转成JSON，能不能使用js将JSON导出Excel呢？然后就在网上找到了方法：纯前台js json导出到excel，不与后台交互
看了一下还是将JSON转成了table然后导出到Excel的，代码如下，只要稍微变化一下就能用了

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#wwo').click(function(){
var data = {"title":[{"value":"集团", "type":"ROW_HEADER_HEADER", "datatype":"string"}, {"value":"日期", "type":"ROW_HEADER_HEADER", "datatype":"string"}],"data":[[{"value":"好好", "type":"ROW_HEADER"}, {"value":"2015-08-24", "type":"ROW_HEADER"}]]};
if(data == '')
return;
JSONToExcelConvertor(data.data, "Report", data.title);
});
});
function JSONToExcelConvertor(JSONData, FileName, ShowLabel) {
//先转化json
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var excel = '<table>';
//设置表头
var row = "<tr>";
for (var i = 0, l = ShowLabel.length; i < l; i++) {
row += "<td>" + ShowLabel[i].value + '</td>';
}
//换行
excel += row + "</tr>";
//设置数据
for (var i = 0; i < arrData.length; i++) {
var row = "<tr>";
for (var index in arrData[i]) { //这里可以对index进行约束取自己想要的数据
var value = arrData[i][index].value === "." ? "" : arrData[i][index].value;
row += '<td>' + value + '</td>';
}
excel += row + "</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>
</head>
<body>
<input type="button" id="wwo" value="导出" />
</body>
</html>

复制代码

ffqfb_wzy · 发表于 2017-2-16 10:34:09

试了下，导不出excel文件，能不能在详细说明操作步骤

ffqfb_wzy · 发表于 2017-2-16 21:23:32

好了

郭德成 · 发表于 2017-2-17 08:03:19

tuopu1222 · 发表于 2017-2-17 09:07:05

用了很好，请问楼主有导入excel的代码吗

我是小菜鸡 · 发表于 2017-3-3 09:11:18

tuopu1222 发表于 2017-2-17 09:07
用了很好，请问楼主有导入excel的代码吗

不好意思，没研究过这个功能

我是小菜鸡 · 发表于 2017-3-3 09:16:50

在实际使用过程中发现这个方法存在一个问题：当数据量很大的时候导出速度很慢，可以通过将数据分段导出的方式提高效率，不过这样也只是暂时的解决方法。最好还是向服务器发送服务请求，在后台生成报表，然后再将报表文件传到前台。

ggzhihh · 发表于 2017-6-14 14:28:10

楼主，能给详细讲解下怎么用吗，我基础更差……

我是小菜鸡 · 发表于 2017-6-20 15:07:59

只要将给的代码中的js部分放到js页面稍微改一下就能用了~

// 将json格式数据转成Excel
Model.prototype.JSONToExcelConvertor = function(JSONData, FileName, ShowLabel) {
var tradeData = this.comp("TradeData");
// 先转化json
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var excel = "<table width='100%' border='1' cellspacing='0' cellpadding='0' >";
// 设置表头
var row = "<tr style='text-align : center;' bgcolor = '#ADADAD'>";
for (var i = 0, l = ShowLabel.length; i < l; i++) {
row += "<td>" + ShowLabel[i] + '</td>';
}
// 换行
excel += row + "</tr>";
// 设置数据
for (i = 0; i < arrData.length; i++) {
row = "<tr bgcolor = '#FCFCFC'>";
var value = arrData[i]['ShopNo'].value === "." ? "" : arrData[i]['ShopNo'].value;
row += '<td style="mso-number-format:\'\\@\';">' + $.trim(value) + '</td>';
value = arrData[i]['ShopName'].value === "." ? "" : arrData[i]['ShopName'].value;
row += '<td style="mso-number-format:\'\\@\';">' + $.trim(value) + '</td>';
value = arrData[i]['Trade'].value === "." ? "" : arrData[i]['Trade'].value;
// 业态名称
var temp = "";
if ($.trim(value) !== "") {
var rows = tradeData.find([ "Code" ], [ value ]);
if (rows.length > 0)
temp = rows[0].val("CodeNameCN");
}
row += '<td style="mso-number-format:\'\\@\';">' + temp + '</td>';
value = arrData[i]['ShopType'].value === "." ? "" : arrData[i]['ShopType'].value;
row += '<td style="mso-number-format:\'\\@\';">' + $.trim(value) + '</td>';
value = arrData[i]['AddUserID'].value === "." ? "" : arrData[i]['AddUserID'].value;
row += '<td style="mso-number-format:\'\\@\';">' + $.trim(value) + '</td>';
value = arrData[i]['AddDateTime'].value === "." ? "" : arrData[i]['AddDateTime'].value;
if ($.trim(value) !== "") {
value = value.replace("T", " ");
value = value.replace("Z", "");
}
row += '<td style="mso-number-format:\'\\@\';">' + $.trim(value) + '</td>';
value = arrData[i]['UpdUserID'].value === "." ? "" : arrData[i]['UpdUserID'].value;
row += '<td style="mso-number-format:\'\\@\';">' + $.trim(value) + '</td>';
value = arrData[i]['UpdDateTime'].value === "." ? "" : arrData[i]['UpdDateTime'].value;
if ($.trim(value) !== "") {
value = value.replace("T", " ");
value = value.replace("Z", "");
}
row += '<td style="mso-number-format:\'\\@\';">' + $.trim(value) + '</td>';
excel += row + "</tr>";
}
excel += "</table>";
var excelFile = "<html xmlns[img]http://bbs.wex5.com/static/image/smiley/default/shocked.gif[/img]='urn:schemas-microsoft-com[img]http://bbs.wex5.com/static/image/smiley/default/shocked.gif[/img]ffice[img]http://bbs.wex5.com/static/image/smiley/default/shocked.gif[/img]ffice' xmlns:x='urn:schemas-microsoft-com[img]http://bbs.wex5.com/static/image/smiley/default/shocked.gif[/img]ffice: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[img]http://bbs.wex5.com/static/image/smiley/default/biggrin.gif[/img]isplayGridlines/>";
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);
};
// 导出报表
Model.prototype.exportBtnClick = function(event) {
this.comp("ExportData").refreshData();
var data = this.comp("ExportData").toJson();
var dataLabel = "店铺代码，店铺名称，业态，有效，添加时间，添加用户，修改时间，修改用户";
this.JSONToExcelConvertor(data.rows, "HRZD-" + sessionStorage.getItem("market") + "-店铺-" + new Date().toLocaleDateString(), dataLabel.split('，'));
};

复制代码

我是小菜鸡 · 发表于 2017-6-20 15:08:35

ggzhihh 发表于 2017-6-14 14:28
楼主，能给详细讲解下怎么用吗，我基础更差……

上一层

		自动登录	找回密码
密码			注册

[分享] WeX5导出Excel

评分