簡單的辦法：使用js生成一個table，可以直接復制到excel中，網上有很多表格插件。
復雜的辦法：js傳遞數據到伺服器，伺服器生成表格後返回一個下載鏈接。
② JS動態生成Table
var _data = [
{'name': 'a','id': 'b1','sex': 'b', 'age': '1'},
{'name': 'a','id': 'b2','sex': 'g','age': '2'},
{'name': 'a','id': 'b3','sex': 'g','age': '3'},
{'name': 'a','id': 'b4','sex': 'b','age': '4' }
]
var UI = {};
UI.Grid = {};
function creatTable(current,o){
var table = document.createElement('table');
table.id = o.id;
table.style.cssText = 'width: 300px; height: 100px;border-collapse:collapse;border: 1px solid #DDDDDD;';
var thead = document.createElement('thead');
var th = document.createElement('tr');
th.style.width = '300px';
th.style.cssText = 'background: #ffffff';
var tbody = document.createElement('tbody');
tbody.style.cssText = 'border: 1px solid #DDDDDD;';
for(var i = 0 ; i < o.cloum.length ; i++){
var td = document.createElement('td');
td.style.width = '75px' ;
var span = document.createElement('span');
span.innerHTML = o.cloum[i].head;
span.style.lineHeight = '30px';
//span.style.fontFamily = '宋體';
span.style.fontSize = '25px';
td.appendChild(span);
td.style.textAlign = 'center';
th.appendChild(td);
}
thead.appendChild(th);
for( var j = 0 ; j < o.data.length ; j++){
var tr = document.createElement('tr');
//var att = getKeys(tr.attributes);
// console.info(att);
// console.info(tr.attributes);
// console.info(tr.attributes.length);
// tr.attributes.selected = false;
for(var i = 0 ; i < o.cloum.length ; i++){
var td = document.createElement('td');
var text = o.data[j][o.cloum[i].datafield] ; //應該有個載入function調用
td.innerHTML = text;
td.style.textAlign = 'center';
td.style.cssText = 'border-left: 1px solid #DDDDDD;border-right: 1px solid #DDDDDD;text-align:center';
tr.appendChild(td);
}
tr.style.cssText = 'border-top: 1px solid #DDDDDD;';
tbody.appendChild(tr);
}
table.appendChild(thead);
table.appendChild(tbody);
current.appendChild(table);
};
$.fn.creatSth = function(o){
UI.Grid[o.id] = o ;
var current = this[0];
var table = document.createElement('table');
table.style.cssText = 'border-collapse:collapse;border: 1px solid #DDDDDD;';
//line 1
var tr1 = document.createElement('tr');
tr1.style.height = '8px';
var td11 = document.createElement('td');
td11.style.width = '8px';
var td12 = document.createElement('td');
var td13 = document.createElement('td');
td13.style.width = '8px';
tr1.appendChild(td11);
tr1.appendChild(td12);
tr1.appendChild(td13);
// toolbar - line
var trbar = document.createElement('tr');
trbar.style.height = '15px';
var tdbar1 = document.createElement('td');
var tdbar2 = document.createElement('td');
var tdbar3 = document.createElement('td');
tdbar2.innerHTML = '123123';
trbar.appendChild(tdbar1);
trbar.appendChild(tdbar2);
trbar.appendChild(tdbar3);
//line 2
var tr2 = document.createElement('tr');
var td21 = document.createElement('td');
td21.style.width = '8px';
var td22 = document.createElement('td');
creatTable(td22,o);
var td23 = document.createElement('td');
td23.style.width = '8px';
tr2.appendChild(td21);
tr2.appendChild(td22);
tr2.appendChild(td23);
//line 3
var tr3 = document.createElement('tr');
tr3.style.height = '8px';
var td31 = document.createElement('td');
td31.style.width = '8px';
var td32 = document.createElement('td');
var td33 = document.createElement('td');
td33.style.width = '8px';
tr3.appendChild(td31);
tr3.appendChild(td32);
tr3.appendChild(td33);
table.appendChild(tr1);
if(o.tbar){
table.appendChild(trbar);
}
table.appendChild(tr2);
table.appendChild(tr3);
current.appendChild(table);
};
$('#test').creatSth({
id:'tb1',
cloum:[
{head:'name',datafield:'name'},
{head:'id',datafield:'id'},
{head:'sex',datafield:'sex'},
{head:'age',datafield:'age'}
],
data:_data
});
//獲取jsonObject的key值
function getKeys(o){
var keys = [];
for(key in o){
keys.push(key);
}
return keys;
}
這個是用JS和jquery寫的簡單的JS表格，自己試試看吧