js导出html网页到excel,js实现导出数据到excel

//js部分

*/

var navs = new Vue({

el: '#navs',

data: {

navs: []

},

ready: function () {

this.$http.get('demoPC.json').then(function (response) {

this.navs = response.data;

});

}

});

Vue.component('simple-grid', {

template: '#grid-template',

props: ['persons', 'columns', 'searchKey']

});

var vm = new Vue({

el: '#lists',

data: {

searchKey: '',

columns: [{

name: '姓名'

}, {

name: '年龄'

}, {

name: '性别'

}],

persons: []

},

ready: function () {

this.$http.get('table.json').then(function (response) {

this.persons = response.data.aa;

});

}

})

// 页面json数据生成excel表

$(function () {

$('#JsonToExcel').click(function () {

var data = {

"title": [],

"data": []

};

var th = document.querySelectorAll('#lists table>thead>tr>th');

for (var i = 0; i < th.length; i++) {

data.title.push(th[i].innerHTML);

};

var tdrs = document.querySelectorAll('#lists table>tbody>tr');

for (var i = 0; i < tdrs.length; i++) {

var ele = [];

for (var j = 2; j <=4; j++) {

ele.push(tdrs[i].childNodes[j].innerHTML);

}

data.data.push(ele);

}

if (data == '') {

return;

}

JSONToExcelConvertor(data.data, "辅昊--电力", data.title);

});

});

function JSONToExcelConvertor(JSONData, FileName, ShowLabel) {

//先转化json

var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

var excel = '

//生成表头

var row = "

";

for (var i = 0; i < ShowLabel.length; i++) {

row += "

" + ShowLabel[i] + '';

}

excel += row + "

";

//循环生成表身

for (var i = 0; i < arrData.length; i++) {

var row = "

";

for (var j in arrData[i]) {

// var name = arrData[i][index].name === "." ? "" : arrData[i][index].name;

var td = arrData[i][j];

row += '

' + td + '';

}

excel += row + "

";

}

excel += "

";

console.log(excel);

var excelFile = "

"xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";

excelFile += '';

excelFile += '';

excelFile += "

";

excelFile += "";

excelFile += "";

excelFile += "

";

excelFile += excel;

excelFile += "";

excelFile += "";

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);

}

//html部分

Adminstratior Platform

登陆

辅昊系统---电力监测

• class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">

Search

JsonToExcel

{{ i.name}}

{{i[j.name]}}

$('#login').bind('click', function () {

alert('success');

});

$('#navs').delegate('li', 'click', function (e) {

e.stopPropagation();

$(this).find('span').toggleClass("chosen");

vm.persons.push({

"姓名": "Tracy",

"年龄": "22",

"性别": "Female"

});

});