H5页面使用前端js将json数据导出成Excel文件的3种方式


最近频繁遇到需要将数据导出成Excel文件的需求,有电脑端的,也有手机端的,既然遇到了,就刚好整理一下

第一种

js-xlsx库,这是很强大的一个excel导入导出功能的js库,它的核心文件是xlsx.core.js,可以将json数据直接导出,网上关于它的介绍很多,这里我就不详细介绍,只放一段示例代码

适用平台:仅限电脑端,手机端我也试过,手机浏览器能输出下载提示,但一点下载就报文件链接失效

代码如下:

第一步引入xlsx.core.js文件,再加上通用的打开下载对话框的函数,准备工作就算完成了


第二步就可以开始直接调用导出功能

"float: right;" onclick="export()">导出下载

第二种

使用原生js将table标签,包括tr、td等对json数据进行拼接,将table输出到表格上实现,这种方法的弊端在于输出的是伪excel,虽说生成xls为后缀的文件,但文件形式上还是html(原文链接:https://blog.csdn.net/hhzzcc_/java/article/details/80419396)

适用平台:主要是电脑端,手机端虽然能导出下载,但因为是伪xls,真实的文件类型并不是xls,很容易被手机端浏览器识破,导致后缀名自动变成bin,文件也打不开

代码如下:



  

"font-size: 20px;color: red;">使用table标签方式将json导出xls文件

第三种

使用原生JS通过将json遍历进行字符串拼接,将字符串输出到csv文件(原文链接:https://blog.csdn.net/hhzzcc_/java/article/details/80419396)

适用平台:电脑端和手机端都能正常导出下载

代码如下:



  

"font-size: 20px;color: red;">使用a标签方式将json导出csv文件

这些方式也是我从网上其他博友那里找到的,我只是做个归纳总结,每种方式我标明了出处,有兴趣研究的朋友可以找原作者交流

相关