验证中...
码云 Gitee IDE 全新上线——支持 Git 管理的轻量在线编码环境
语言: JavaScript
分类: jQuery 插件
最后更新于 2018-05-14 21:41
片段 1 片段 2
test.html
原始数据 复制代码
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<title>Export xsl</title>
<style>
table {
border-spacing: 0;
border-collapse: collapse;
}
.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
border: 1px solid #ddd;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
td,
th {
padding: 0;
text-align: center;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" language="javascript">
//初始化并请求表格数据
$(document).ready(function () {
var dataS = [];
//表格数组(备用
var exTable = $('#exportable');
//定义表格对象
var titleDom = function (title) {
return '<tr><td style="" colspan="11">'+ title +'</td></tr>';
};
var classDom = '<tr><td>序号</td><td>位置</td><td>尺寸</td><td>样例</td><td>材料</td><td>产品型号</td><td>单位</td><td>用料</td><td>数量</td><td>单价(元)</td><td>小计(元)</td></tr>';
//定义种类标题(暂时写死)
var colDom = function (td) {
return '<tr>' + td + '</tr>';
};
//定义col dom
var tdDom = function (info) {
if(info == undefined){
return '<td></td>';
}else return '<td>' + info + '</td>';
};
//单元格 dom
var tdDomL = function (info,rows) {
return '<td rowspan="'+ rows +'">' + info + '</td>';
};
//大单元格 dom
$.ajax({
url:'realJson.json',//请求表格数据url
datatype:"json",
success:function(data){
var titleA = [];
//加入标题单元格
titleA.push(data.title);
dataS.push(titleA);
exTable.append(titleDom(data.title));
exTable.append(classDom);
for(i=0;i<data.main.length;i++){
//遍历main
var loA = [];
loA.push(data.main[i].locale);
dataS.push(loA);
console.log(data.main[i].config.length);
exTable.append(colDom(tdDomL(i + 1,data.main[i].config.length) + tdDomL(data.main[i].locale,data.main[i].config.length) +
tdDomL('-',data.main[i].config.length) + tdDomL('-',data.main[i].config.length) +
tdDom() + tdDom() + tdDom() + tdDom() + tdDom() + tdDom() + tdDom()
));
//插入序号单元格以及本行位置单元格
for(x=0;x<data.main[i].config.length-1;x++){
//生成剩余的单元格dom
exTable.append(colDom(tdDom() + tdDom() + tdDom() + tdDom() + tdDom() + tdDom() + tdDom()));
}
for(x=0;x<data.main[i].config.length;x++){
//遍历config 加入单元格数组
//console.log(data.main[i].config[x]);
var infoA = [];
infoA.push(data.main[i].config[x].id);
infoA.push(data.main[i].config[x].value);
dataS.push(infoA);
}
}
//console.log('ds',dataS);
exTable.find('tr').find('td').css({
"vertical-align":"middle",
"font-size":"12px",
"text-align":"center",
"height":"30px",
"width":"130px",
"border":"0.5px solid rgb(113, 113, 113)"
});
//添加表格缺省样式
}
});
});
var idTmr;
function getExplorer() {
var explorer = window.navigator.userAgent ;
//ie
if (explorer.indexOf("MSIE") >= 0) {
return 'ie';
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
return 'Firefox';
}
//Chrome
else if(explorer.indexOf("Chrome") >= 0){
return 'Chrome';
}
//Opera
else if(explorer.indexOf("Opera") >= 0){
return 'Opera';
}
//Safari
else if(explorer.indexOf("Safari") >= 0){
return 'Safari';
}
}
function method1(tableid) {//整个表格拷贝到EXCEL中
if(getExplorer()=='ie')
{
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");
//创建AX对象excel
var oWB = oXL.Workbooks.Add();
//获取workbook对象
var xlsheet = oWB.Worksheets(1);
//激活当前sheet
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
//把表格中的内容移到TextRange中
sel.select;
//全选TextRange中内容
sel.execCommand("Copy");
//复制TextRange中内容
xlsheet.Paste();
//粘贴到活动的EXCEL中
oXL.Visible = true;
//设置excel可见属性
try {
var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
} catch (e) {
print("Nested catch caught " + e);
} finally {
oWB.SaveAs(fname);
oWB.Close(savechanges = false);
//xls.visible = false;
oXL.Quit();
oXL = null;
//结束excel进程,退出完成
//window.setInterval("Cleanup();",1);
idTmr = window.setInterval("Cleanup();", 1);
}
}
else
{
tableToExcel('exportable')
}
}
function Cleanup() {
window.clearInterval(idTmr);
CollectGarbage();
}
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<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"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },
format = function(s, c) {
return s.replace(/{(\w+)}/g,
function(m, p) { return c[p]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})()
</script>
</head>
<body>
<table class="table table-bordered" id="exportable"></table>
<input id="Button1" type="button" value="导出EXCEL" onclick="javascript:method1('exportable')" />
</body>
</html>
realJson.json
原始数据 复制代码
{
"title": "XX软装",
"main": [
{
"locale": "ROOM0",
"config": [
{
"id": "10",
"value": "5.9"
},
{
"id": "15",
"value": "68735.00"
},
{
"id": "32",
"value": "600.00"
},
{
"id": "11",
"value": "2.83"
},
{
"id": "16",
"value": "60"
},
{
"id": "12",
"value": "233"
},
{
"id": "17",
"value": "82482.00"
},
{
"id": "13",
"value": "1374.70"
},
{
"id": "30",
"value": "20"
},
{
"id": "100",
"value": "151817.00"
},
{
"id": "14",
"value": "50"
},
{
"id": "31",
"value": "30"
}
],
"floor": "1"
},
{
"locale": "ROOM1",
"config": [
{
"id": "10",
"value": "3"
},
{
"id": "15",
"value": "27.00"
},
{
"id": "702",
"value": "24.00"
},
{
"id": "11",
"value": "3"
},
{
"id": "16",
"value": "3"
},
{
"id": "700",
"value": "2"
},
{
"id": "12",
"value": "3"
},
{
"id": "17",
"value": "27.00"
},
{
"id": "703",
"value": "2"
},
{
"id": "13",
"value": "9.00"
},
{
"id": "701",
"value": "6"
},
{
"id": "100",
"value": "78.00"
},
{
"id": "14",
"value": "3"
},
{
"id": "704",
"value": "4.00"
}
],
"floor": "1"
}
]
}

评论列表( 0 )

你可以在登录后,发表评论

搜索帮助