JS实现将数据导出到Excel的方法详解
最新回答
释放
2025-03-30 10:15:56
第二种方法是通过将json数据遍历进行字符串拼接，将字符串输出到csv文件。这种方法避免了生成伪Excel的问题，更加符合实际需求。以下是实现代码。
html中添加了一个按钮，点击按钮触发导出功能。代码如下：
htmlhead????p?style="font-size:?20px;color:?red;"使用a标签方式将json导出csv文件/p????button?onclick='tableToExcel()'导出/button/headbody????script????const?tableToExcel?=?()?=?{????????//?要导出的json数据????????const?jsonData?=?[????????????{????????????????name:'路人甲',????????????????phone:'123456789',????????????????email:'000@123456.com'????????????},????????????{????????????????name:'炮灰乙',????????????????phone:'123456789',????????????????email:'000@123456.com'????????????},????????????{????????????????name:'土匪丙',????????????????phone:'123456789',????????????????email:'000@123456.com'????????????},????????????{????????????????name:'流氓丁',????????????????phone:'123456789',????????????????email:'000@123456.com'????????????},????????];????????//?列标题，逗号隔开，每一个逗号就是隔开一个单元格????????let?str?=?`姓名,电话,邮箱`;????????//?增加为了不让表格显示科学计数法或者其他格式????????for(let?i?=?0?;?i??jsonData.length?;?i++?){????????????for(const?key?in?jsonData[i]){????????????????str+=`${jsonData[i][key]?+?''},`;????????????????}????????????str+='';????????}????????//?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
这段代码中，首先定义了要导出的json数据，然后定义了列标题，并通过循环遍历json数据，将每个字段值加入到字符串中。最后，通过创建a标签并设置href属性和download属性来实现文件下载。
以上两段代码可以复制使用。至此，关于JS实现将数据导出到Excel的方法详解的文章介绍完毕，更多相关JS数据导出内容请继续浏览自由互联。
热门标签
