js 实现纯前端将数据导出excel两种方式，亲测有效
由于项目需要，需要在不调用后台接口的情况下，将json数据导出到excel表格，兼容chrome没问题，其他还没有测试过
通过将json遍历进行字符串拼接，将字符串输出到csv文件，输出的文件不会再是html类型的文件而是真正的csv文件，代码如下
<html>
<head>
<p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>
<button onclick='tableToExcel()'>导出</button>
</head>
<body>
<script> function tableToExcel(){
//要导出的json数据
var 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 = `姓名,电话,邮箱\n`;
//增加\t为了不让表格显示科学计数法或者其他格式
for(let i = 0 ; i < jsonData.length ; i++ ){
for(let item in jsonData[i]){
str+=`${jsonData[i][item] + '\t'},`;
}
str+='\n';
}
//encodeURIComponent解决中文乱码
let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
//通过创建a标签实现
var link = document.createElement("a");
link.href = uri;
//对下载的文件命名
link.download = "json数据表.csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} </script>
</body>
</html>
参考了很多大佬的博客其中这两篇对我启发最大，感谢！
https://blog.csdn.net/oscar999/article/details/16342699
https://blog.csdn.net/aa122273328/article/details/50388673
https://blog.csdn.net/hhzzcc_/article/details/80419396
js 实现纯前端将数据导出excel两种方式，亲测有效的更多相关文章
- js 实现纯前端将数据导出excel
通过将json遍历进行字符串拼接,将字符串输出到csv文件,输出的文件不会再是html类型的文件而是真正的csv文件,代码如下 <html> <head> <p styl ...
- 纯前端实现数据导出excel文件
一 安装依赖 npm install -S file-saver xlsx npm install -D script-loader 二 新建文件夹 在网上百度引入即可 三 在main.js中引入 ...
- 数据存储的两种方式：Cookie 和Web Storage
数据存储的两种方式:Cookie 和Web Storage 1.Cookie Cookie的作用就像你去超市购物时,第一次给你办张购物卡,这个购物卡里存放了一些你的个人信息,下次你再来这个连锁超市时, ...
- 数据存储的两种方式：Cookie 和Web Storage（转）
数据存储的两种方式:Cookie 和Web Storage 数据存储的两种方式:Cookie 和Web Storage 1.Cookie Cookie的作用就像你去超市购物时,第一次给你办张购物卡 ...
- Redis数据持久化的两种方式RDB和AOF
由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据就全丢失了,于是需要开启redis的持久化功能,将数据保存到磁 盘上,当redis重启后,可以从磁盘中恢复数据.redis提 ...
- 大数据学习day33----spark13-----1.两种方式管理偏移量并将偏移量写入redis 2. MySQL事务的测试 3.利用MySQL事务实现数据统计的ExactlyOnce（sql语句中出现相同key时如何进行累加（此处时出现相同的单词））4 将数据写入kafka
1.两种方式管理偏移量并将偏移量写入redis (1)第一种:rdd的形式 一般是使用这种直连的方式,但其缺点是没法调用一些更加高级的api,如窗口操作.如果想更加精确的控制偏移量,就使用这种方式 代 ...
- 如何使用JavaScript实现纯前端读取和导出excel文件
js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx.ods(一种OpenOffice专 ...
- 如何使用JavaScript实现纯前端读取和导出excel文件（转）
转自小茗同学博客:https://www.cnblogs.com/liuxianan/p/js-excel.html js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯 ...
- 前端表格数据导出excel
使用tableExport.js导出bootstrap-table表格成excel并且支持中文 1. 下载tableExport.js https://github.com/hhurz/tableEx ...
随机推荐
- poj 1741 Tree（树的点分治）
poj 1741 Tree(树的点分治) 给出一个n个结点的树和一个整数k,问有多少个距离不超过k的点对. 首先对于一个树中的点对,要么经过根结点,要么不经过.所以我们可以把经过根节点的符合点对统计出 ...
- 开发整理-Javaweb应用的系统升级功能
web应用有一个功能菜单是系统升级,通过调用升级脚本,将新发布的war替换原来的tomcat的webapps下的应用,然后停掉tomcate,再重启tomcate.最初实现就是通过简单的用在web项目 ...
- UIScrollView嵌套滑动手势冲突的简易实现
明确需求 现在有较多的商城类app有如下需求,界面上带有headerView,并且有一个barView可悬停,最下方为多个可左右滑动的tableView,具体可参考下图 另类实现 在网上关于此类需求的 ...
- 树的计数 Prufer序列+Cayley公式
先安利一发.让我秒懂.. 第一次讲这个是在寒假...然而当时秦神太巨了导致我这个蒟蒻自闭+颓废...早就忘了这个东西了... 结果今天老师留的题中有两道这种的:Luogu P4981 P4430 然后 ...
- python入门之time模块和datetime模块
time模块 时间三种表示:时间戳(秒单位),struct_time(元组,可以分开调用),指定格式(格式化) time.sleep() 等待5秒钟 time.time() 返回时间戳 time.ct ...
- Carryon的字符串
I J I: Carryon的字符串 时间限制: 1 s 内存限制: 128 MB 提交 我的状态 题目描述 Carryon最近喜欢上了一些奇奇怪怪的字符,字符都是英文小写字母,但 ...
- Jmeter-性能测试工具
0.概念和备注 //基本使用流程 测试计划-->右键 添加-> Threads(Users) --> 选择线程组 -->线程组-->右键 添加 --> Sample ...
- 张高兴的 .NET Core IoT 入门指南：（四）使用 SPI 进行通信
什么是 SPI 和上一篇文章的 I2C 总线一样,SPI(Serial Peripheral Interface,串行外设接口)也是设备与设备间通信方式的一种.SPI 是一种全双工(数据可以两个方向同 ...
- Spring整合Struts2 XML版
1.jar包 <!--spring配置--> <dependency> <groupId>org.springframework</groupId> & ...
- css3的transform变换scale和translate等影响jQuery的position().top和offset().top
css3的transform变换scale和translate等影响jQuery的position().top和offset().top