方法一
将table标签，包括tr、td等对json数据进行拼接，将table输出到表格上实现，这种方法的弊端在于输出的是伪excel，虽说生成xls为后缀的文件，但文件形式上还是html，代码如下
<html><head><p style="font-size: 20px;color: red;">使用table标签方式将json导出xls文件</p><button onclick='tableToExcel()'>导出</button></head><body><script>consttableToExcel=()=>{// 要导出的json数据const jsonData =[{name:'admin1',phone:'123456',email:'[email protected]'},{name:'admin2',phone:'123456',email:'[email protected]'},]// 列标题let str ='<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>';// 循环遍历，每行加入tr标签，每个单元格加td标签for(let i =0; i < jsonData.length ; i++){
str+='<tr>';for(const key in jsonData[i]){// 增加\t为了不让表格显示科学计数法或者其他格式
str+=`<td>${ jsonData[i][key]+'\t'}</td>`;}
str+='</tr>';}// Worksheet名const worksheet ='Sheet1'const uri ='data:application/vnd.ms-excel;base64,';// 下载的表格模板数据const 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编码constbase64=s=> window.btoa(unescape(encodeURIComponent(s)));</script></body></html>
方法二
通过将json遍历进行字符串拼接，将字符串输出到csv文件，代码如下
<html><head><p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p><button onclick='tableToExcel()'>导出</button></head><body><script>consttableToExcel=()=>{// 要导出的json数据const jsonData =[{name:'admin1',phone:'123456',email:'[email protected]'},{name:'admin2',phone:'123456',email:'[email protected]'},];// 列标题，逗号隔开，每一个逗号就是隔开一个单元格let str =`姓名,电话,邮箱\n`;// 增加\t为了不让表格显示科学计数法或者其他格式for(let i =0; i < jsonData.length ; i++){for(const key in jsonData[i]){
str+=`${jsonData[i][key]+'\t'},`;}
str+='\n';}// encodeURIComponent解决中文乱码const uri ='data:text/csv;charset=utf-8,\ufeff'+encodeURIComponent(str);// 通过创建a标签实现const link = document.createElement("a");
link.href = uri;// 对下载的文件命名
link.download ="json数据表.csv";
link.click();}</script></body></html>
本文转载自: https://blog.csdn.net/DZQ1223/article/details/130583277
版权归原作者 前端~初学者 所有， 如有侵权，请联系我们删除。
版权归原作者 前端~初学者 所有， 如有侵权，请联系我们删除。