码迷,mamicode.com
首页 > 其他好文 > 详细

table

时间:2019-03-20 01:10:02      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:star   efault   cli   mic   list   onclick   name   roc   内容   

<html>

 

<head>
<p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p>
<button onclick=‘tableToExcel()‘>导出</button>
</head>

 

<body>
<script>
var weekStart = ‘2019-03-17‘
var weekEnd = ‘2019-03-23‘
function tableToExcel() {
//要导出的json数据
const jsonData = [
{
SD: ‘2019-03-17 00:00‘,
ED: ‘2019-03-17 17:00‘,
TI: ‘今天天气真好‘
},
{
SD: ‘2019-03-18 01:00‘,
ED: ‘2019-03-18 17:00‘,
TI: ‘大河大河‘
},
{
SD: ‘2019-03-18 00:00‘,
ED: ‘2019-03-18 12:00‘,
TI: ‘大河大河‘
},
{
SD: ‘2019-03-20 02:00‘,
ED: ‘2019-03-20 14:00‘,
TI: ‘真好‘
},
{
SD: ‘2019-03-17 00:00‘,
ED: ‘2019-03-17 12:00‘,
TI: ‘今大家好‘
}
]
let data = dataProcessing(jsonData)
console.log(data)
//列标题
let str = ‘<tr><td>全天</td>‘
for (let v of data) {
for (let i in v) {
str += `<td>${i}</td>`
}
}
str += ‘</tr>‘

 

// 7天标题
// let str = ‘<tr>‘
// for (let i = 0; i < 6; i++) {
// for (let i in v) {
// str += `<td>${i}</td>`
// }
// }
// str += ‘</tr>‘
// console.log(str)
// return
// // 循环遍历,每行加入tr标签,每个单元格加td标签
// for (let i = 0; i < jsonData.length; i++) {
// str += ‘<tr>‘;
// for (let item in jsonData[i]) {
// //增加\t为了不让表格显示科学计数法或者其他格式
// str += `<td>${jsonData[i][item] + ‘\t‘}</td>`;
// }
// str += ‘</tr>‘;
// }
// for (let i in data) {
// str += `<tr><td>${i}</td>`
// for (let a = 0; a < 6; a++) {
// str += `<tr><td>${i}</td>`
// }
// for (let data[i]) {

 

// }
// }
//Worksheet名
let worksheet = ‘Sheet1‘
let uri = ‘data:application/vnd.ms-excel;base64,‘;

 

//下载的表格模板数据
let 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 + base64(template)
}
//输出base64编码
function base64(s) { return window.btoa(unescape(encodeURIComponent(s))) }
// 数据结构处理,把一天的数据归为一个对象
function dataProcessing(data) {
let list = []
for (let v of data) {
let st = v.SD.split(‘ ‘)[1] // 开始时间
let sh = st.split(‘:‘)[0] // 开始时间小时
switch (sh) {
case ‘00‘:
foo(list, v, sh)
break;
case ‘01‘:
foo(list, v, sh)
break;
case ‘02‘:
foo(list, v, sh)
break;
case ‘03‘:
foo(list, v, sh)
break;
case ‘04‘:
foo(list, v, sh)
break;
// case ‘05‘:
// obj[0][sd].push(t)
// break;
// case ‘06‘:
// obj[0][sd].push(t)
// break;
// case ‘07‘:
// obj[0][sd].push(t)
// break;
// case ‘08‘:
// obj[0][sd].push(t)
// break;
// case ‘09‘:
// obj[0][sd].push(t)
// break;
// case ‘10‘:
// obj[0][sd].push(t)
// break;
// case ‘11‘:
// obj[0][sd].push(t)
// break;
// case ‘12‘:
// obj[0][sd].push(t)
// break;
// case ‘13‘:
// obj[0][sd].push(t)
// break;
// case ‘14‘:
// obj[0][sd].push(t)
// break;
// case ‘15‘:
// obj[0][sd].push(t)
// break;
// case ‘16‘:
// obj[0][sd].push(t)
// break;
// case ‘17‘:
// obj[0][sd].push(t)
// break;
// case ‘18‘:
// obj[0][sd].push(t)
// break;
// case ‘19‘:
// obj[0][sd].push(t)
// break;
// case ‘20‘:
// obj[0][sd].push(t)
// break;
// case ‘21‘:
// obj[0][sd].push(t)
// break;
// case ‘22‘:
// obj[0][sd].push(t)
// break;
// case ‘23‘:
// obj[0][sd].push(t)
// break;}}
default:
break;
}
}
return list
function foo(data, v, val) {
let sd = v.SD.split(‘ ‘)[0] // 开始日期
let st = v.SD.split(‘ ‘)[1] // 开始时间
let sh = st.split(‘:‘)[0] // 开始时间小时
let ed = v.ED.split(‘ ‘)[0] // 结束日期
let et = v.ED.split(‘ ‘)[1] // 结束时间
let eh = et.split(‘:‘)[0] // 结束时间小时
let t = `${st}~${et} ${v.TI}` // 表格文本
let n = Number(val)
data[n] = data[n] ? data[n] : {}
data[n][sd] = data[n][sd] ? data[n][sd] : []
data[n][sd].push(t)
 
// data[小时][天][‘真好‘,‘非常好‘][0] 这个就是一格的内容
}
}
</script>
</body>

 

</html>

table

标签:star   efault   cli   mic   list   onclick   name   roc   内容   

原文地址:https://www.cnblogs.com/mxy666/p/10562312.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!