前端生成Excel 表格
生活随笔
收集整理的這篇文章主要介紹了
前端生成Excel 表格
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<meta name="description" content="User login page" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /><!--導(dǎo)出功能，前端+ 后臺(tái)功能。http://localhost/Version10/Excel.html --><!-- bootstrap & fontawesome --><link rel="stylesheet" href="assets/css/bootstrap.min.css" /><link rel="stylesheet" href="assets/font-awesome/4.2.0/css/font-awesome.min.css" /><!-- text fonts --><link rel="stylesheet" href="assets/fonts/fonts.googleapis.com.css" /><!-- ace styles --><link rel="stylesheet" href="assets/css/ace.min.css" /><!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ace-part2.min.css" /><![endif]--><link rel="stylesheet" href="assets/css/ace-rtl.min.css" /><!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ace-ie.min.css" /><![endif]--><!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --><!--[if lt IE 9]><script src="assets/js/html5shiv.min.js"></script><script src="assets/js/respond.min.js"></script><![endif]-->
</head><body class="login-layout light-login"><div style="background-color:red;"><a href='#' onclick="tableToExcel()">測試按鈕</a></div><table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table></body>function tableToExcel(){//要導(dǎo)出的json數(shù)據(jù)var jsonData = [{name:'路人甲',phone:'123456789',email:'000@123456.com',number:22},{name:'炮灰乙',phone:'123456789',email:'000@123456.com',number:33},{name:'土匪丙',phone:'123456789',email:'000@123456.com',number:44},{name:'流氓丁',phone:'123456789',email:'000@123456.com',number:55},]//列標(biāo)題，逗號(hào)隔開，每一個(gè)逗號(hào)就是隔開一個(gè)單元格let str = `姓名,電話,郵箱,數(shù)字\n`;//增加\t為了不讓表格顯示科學(xué)計(jì)數(shù)法或者其他格式for(let i = 0 ; i < jsonData.length ; i++ ){for(let item in jsonData[i]){//str+=`${jsonData[i][item] + '\t'},`; str+=`${jsonData[i][item]},`; }str+='\n';}//encodeURIComponent解決中文亂碼let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);//通過創(chuàng)建a標(biāo)簽實(shí)現(xiàn)var link = document.createElement("a");link.href = uri;//對(duì)下載的文件命名link.download = "json數(shù)據(jù)表.csv";document.body.appendChild(link);link.click();document.body.removeChild(link);
}</script>
總結(jié)
以上是生活随笔為你收集整理的前端生成Excel 表格的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 空调耗电多少度？
- 下一篇： 2017年html5行业报告,云适配发布