json导出excel表格
HTML
<el-button type="danger" class="ml10 fr" @click="exportForm">导出表格</el-button>
JS
表格输出的数字,如果太长,会自动计算,解决办法:
在td上加上样式 style=“mso-number-format:’\@’”
//导出表格
exportForm(){
let that = this;
let jsonData = [];
for(let i in this.tableList){
let tr = {
times: this.tableList[i].times,
pv: this.tableList[i].pv,
uv: this.tableList[i].uv,
click: this.tableList[i].click,
firstPay: this.tableList[i].firstPay,
firstAmount: this.tableList[i].firstAmount,
shard: this.tableList[i].shard,
};
jsonData.push(tr);
console.log(tr)
}
//列标题
var str = '';
str += '<tr><th>时间</th><th>访问量(pv)</th><th>访问人数(uv)</th><th>预购点击量</th><th>已付定金人数</th><th>已收到定金(元)</th><th>分享次数</th></tr>';
//循环遍历,每行加入tr标签,每个单元格加td标签
for(let i = 0 ; i < jsonData.length ; i++ ){
str+='<tr>';
for(let item in jsonData[i]){
//增加\t为了不让表格显示科学计数法或者其他格式
str+=`<td style="mso-number-format:'\\@'">${ jsonData[i][item] + '\t'}</td>`;
}
str+='</tr>';
}
str += '<tr><td></td></tr>';
str += '<tr><td>总计:</td><td style="mso-number-format:\'\\@\'">'+this.sum.pv+'</td><td style="mso-number-format:\'\\@\'">'+this.sum.uv+'</td><td style="mso-number-format:\'\\@\'">'+this.sum.click+'</td><td style="mso-number-format:\'\\@\'">'+this.sum.firstPay+'</td><td style="mso-number-format:\'\\@\'">'+this.sum.firstAmount+'</td><td style="mso-number-format:\'\\@\'">'+this.sum.shard+'</td></tr>';
var worksheet = 'Sheet1'; //Worksheet名
var uri = 'data:application/vnd.ms-excel;base64,';
//下载的表格模板数据
var 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>${str}</table></body></html>`;
//下载模板
// window.location.href = uri + this.base64(template)
var link = document.createElement("a");
link.href = uri + this.base64(template);
link.download = '表格下载' + ".xls";
link.style = "visibility:hidden";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},
base64 (s) {
return window.btoa(unescape(encodeURIComponent(s)))
},