原生javaScript导出表格数据
Posted 付正义
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生javaScript导出表格数据相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <button onclick="exportData(header,jsonData,‘solid‘,‘csv‘)">导出csv</button> <button onclick="exportData(header,[],‘下载模板‘,‘csv‘)">下载模板</button> </body> </html> <script type="text/javascript"> //表头 var header = [ { key: ‘name‘, value: ‘姓名‘ }, { key: ‘email‘, value: ‘邮箱‘ }, { key: ‘age‘, value: ‘年龄‘ }, { key: ‘phone‘, value: ‘手机号‘ }, { key: ‘address‘, value: ‘地址‘ } ] //表格数据 var jsonData = [ { name:‘孙悟空‘, phone:‘123456‘, email:‘[email protected]‘ }, { name:‘猪八戒‘, phone:‘123456‘, email:‘[email protected]‘ }, { name:‘沙和尚‘, phone:‘123456‘, email:‘[email protected]‘ }, { name:‘唐僧‘, phone:‘123456‘, email:‘[email protected]‘ } ] function exportData(header, jsonData, fileName,extension){ //列标题，用逗号隔开，每一个逗号就是隔开一个单元格 let str = ‘‘; var keys = []; for(i = 0; i<header.length; i++){ str+=`${header[i].value} ,`; keys.push(header[i].key); } str +=` ` for(let i = 0; i<jsonData.length; i++){ for(let j = 0; j < keys.length; j++){ console.log(jsonData[i],keys[j]) str+=`${jsonData[i][keys[j]] || ‘‘} ,` } str+=` ` } let uri = ‘data:text/csv;charset=utf-8,ufeff‘ + encodeURIComponent(str); download(uri,fileName,extension); } function download(url,fileName,extension){ var oA = document.createElement(‘a‘); oA.href = url; oA.download = `${fileName}.${extension}`; document.body.appendChild(oA); oA.click(); document.body.removeChild(oA); } </script>
以上是关于原生javaScript导出表格数据的主要内容，如果未能解决你的问题，请参考以下文章
云原生数据湖分析(DLA) 支持表格存储并发导出功能，性能大幅提升 ！